[Powered by Google Translate] [9 недеља, наставак] [Давид Ј. Малан - Универзитет Харвард] [Ово је ЦС50. - ЦС50.ТВ] 

Ово је ЦС50. Ово је крај недеље 9. Пуно Вам хвала. Коначно. 9 недеља. Имам га. Данас ћемо наставити наш разговор о веб програмирање са једним оком ка коначном пројекта, а не зато што морате да урадите нешто Вебу за завршне пројекте, али зато ни за коначних пројекте или након ЦС50 ово је свакако правац у коме модерни софтвер иде. А ипак то није стварно лако. У ствари, једна од најтежих ствари које треба урадити је аспект дизајна. 

На пример, по дизајну ми заправо значи добијање кориснички интерфејс или корисничко искуство у праву. Ја претпостављам - а ми знамо из недавног проблем сету када је неколико вас емитован своје замерке о неком комаду софтвера или хардвер који вас инфуриатес, било на кампусу или ван - има доста сајтова тамо, има доста хардвера тамо, такав је срање. Али реалност је да измишља ствари које се лако коришћење, али су ипак моћне је веома тежак изазов. Дакле, за данас сам питао Јосиф и Томи да ми се придружи овде тако да можемо да разговарамо, како о дизајн и какве мисаоних процеса треба кренути кроз главу када дизајнирате своје завршне пројекте, будућа настојања. А онда, уз помоћ Томијеву ћемо погледати неке од детаље имплементације. Како можете имати неку визију на папиру или у вашем уму које затим можете извршити програмски користећи неке од технологија и техника управо смо почели да разговарамо о томе, наиме ЈаваСцрипт и нешто још новије, наиме АЈАКС, асинхрони ЈаваСцрипт. То вам омогућава да направите све динамичније од корисничког интерфејса по преузимању више и више података прогресивно са сервера. Тако ћемо видети неке од тих исечака, као и данас. Као на страну, ако сте заинтересовани за концентрисање у рачунарству или мининг у компјутерској науци, знам да је ово у петак у подне у Маквелл Дворкин 221 ће бити пица догађај где можете научити нешто више о рачунарству. На свом путу од врата данас ћете бити у стању да покупи незванични водич за ЦС на Харварду. Ми ћемо то ставити на канте за смеће ван у висини струка тако да ако желите да ухватите то и науче нешто више о ЦС да ће бити ту за вас, како је то било у недељу 0. Такође, ако желите да нам се придружите на ЦС50 ручак у петак у 1:15 часова, главе до цс50.нет/лунцх. Без даљег одлагања, дајем ти асистент Јозефа Онг. Здраво. [Аплауз] Хвала. Први пут сам сазнао о дизајну је у класи овде зове ЦС179. 

Професор на време нам испричао причу о другом професора који је отишао у хотел и користили славину. Може ли ми неко рећи шта је 2 дугмићи на лево и десно ради? [Ученик] Топла и хладна. >> Топло и хладно. Добро. Шта сте очекивали нормално, зар не? Овај професор после употребе славина жели да се истуширам, а он наставља да користи ово. Он мисли да је лево и десно стране су за топло и хладно, зар не? Али може неко реци ми шта то заправо радимо? Било руке? [Нечујан ученик одговор] >> Један предлог је? [Нечујан ученик одговор] >> температура? Тако је један од њих контролише температуру и друге контроле? >> [Ученик] притисак воде. Вода притисак. Добро. Овај професор улази у ово, а мислећи да контролишу топло и хладно, окреће онај прави, који он мисли да је за топло, све до јер жели да се топлом водом. Па, то стварно не поклапају, тако да он добија ово није баш забавно искуство бића у хладан туш, а сви знамо шта то осећај. Ово је пример дизајн мана. Оно што хоћу да кажем је његова очекивања од пипа не подудара са оним изашао испод туша, која је врста несрећа за њега. Дакле, ово је пример дизајн мана што се дешава у стварном животу. Али ми видимо све врсте других оних као добро. Ми вероватно нисте љубитељи МБТА система. Ово је метро систем заправо у Лондону, који каже: "Ово дугме није у употреби." Зашто је уопште тамо? Зашто смо чак брига? Кад сам био клинац, пошто је технички потковани један у кући, кад год рачунар би се слупао, моја мама би дошао до мене, показујући ми овај екран и пита ме шта се десило. 

Чак ни ја не знам шта то значи. [Смех] Шта? [Смех] Понекад се осећамо као да програмери су само троллинг нас. Као корисници смо као, "Шта се дешава Неко нам кажеш?". То све се своди на питање дизајна. Дизајн, као што можемо видети, не само о естетици, не ради се о томе како ствари изгледају. Ми овде видимо да је овај мали поп-уп овде заправо изгледа прилично лепо. Она има дроп сенке у позадини, има граница радијуса дешава. То је врста лепо. То није баш добро осмишљен, јер то није врло корисник пријатан. Тај мали поп-уп који се појављује заиста не дај било какву информацију о томе шта се дешава, то ми не говори ништа као корисник о томе како да се опорави од тог грешке. Желимо да размишљамо о стварима које дизајн није. Прво, то није естетика. Такође, није надев апликацију са тона непотребног функционалности. Ако сте Тајландски ресторан, вероватно не желите да буде зубар у исто време. И са Фацебоок Куестионс, а не да се многи људи користе и није било баш у језгру онога што су градили. И тако је лепо да мислим о томе није толико количину ствари да си ставио на свој захтев, али је квалитет и како ти боље да на тај корисничко искуство самим побољшање на оно што већ имате. 

У суштини, дизајн нам говори шта треба да се изгради. На пример, ако градимо нешто што пустите нас да тражи ствари, као и Гоогле, на пример, треба да радимо ствари на начин који захтева корисник преузме много кликова доћи до онога што желе, или да то радимо на неки начин, на пример, Гоогле Инстант, или аутоматско довршавање који нам омогућава да дођете до наших резултата брже? Инжењеринг подразумева, као и Томи ће вам показати, заправо гради. Постоји много врста дизајна. На пример, ако правите нешто да размести нешто у земљу трећег света, где нема много струје и толико технологије, морате да дизајнирате шта изградњи на начин који лако даје приступ тамошњих људи. Али шта врсте других дизајнерских решења могу бити или могу бити укључени у нешто овако? Да. Видим руку. [Нечујан ученик одговор] >> реду. Управо тако. Приступачност је једна ствар. Многи људи не размишљају о томе, "Шта је са мојим корисницима?" као крајности било спектра. Имам кориснике који могу да имају сметње у развоју да не размишљам о томе и ја само размишљам о пројектовању за опште корисника. Интернет је доступан свима данас, и ја треба да се изради тих људи, као добро. Које друге одлуке о дизајну можда правите? Да. >> [Ученик] трошкова. Трошкови. Врло добро. Друга ствар коју смо могли засновати своје одлуке дизајна он су трошак. Ако смо посао, желите да изгради нешто што не узима пуно трошкова за производњу али могу продавати у посебно високој цени, или да нам донесем профит. 

То су све различите врсте дизајна, али када градимо нешто на Интернету или када градимо нешто што вероватно не кошта толико да се изгради сада, као интернет апликација - не морате да баци много капитал у њу како да направимо нешто што заправо ради - што смо више забринути је корисничко искуство. Ми то зовемо корисника центрирано дизајн. У суштини оно што корисник центриран дизајн подразумева се стављање себе у ципеле ваших корисника. Ако неко пријави за шта градим, очигледно сам дошао у моју одређену апликацију са циљем на уму, са задатком желе да се заврши. А твој посао није само да им помогне да заврши тај задатак већ да им помогне да заврше тај посао на начин који је ефикасан, интуитиван, и, као што нека особа каже тамо доступни. Шта ефикасност значи? Ефикасност значи колико брзо се моје упутство заврши задатак дати мој интерфејс. Да ли је потребно много кликова за њих да се са једног места на друго? Да ли је досадан? Да ли они морају да обављају много задатке који се понављају? Желимо да тај процес што ефикасније тако да они не морају да раде такве ствари. Што се тиче интуитивност, то је, на пример, ако корисник гледа моју интерфејс, је лако за њих да добијете од места до места? Да ли је лако за њих да схвате шта они имају да кликнете на мом интерфејсу како за њих да се постигне циљ или задатак који желе да постигну? 

И на крају, како је један човек рекао тамо, приступачност је веома важно. [Мушки говорник] То питању приступачности за ствари као што су визије, свиђа како сам заправо пројектовати нешто за некога ко је слеп? О. За људе који не могу да виде на све, ми имамо нешто што се зове екран читаоци. Оно што треба да урадите је да треба да се изгради свој сајт на начин да, на пример, поједини технологије оно што ми називамо - Постоји много ствари које сада. Мислим да постоје читачи екрана ЈАВС зову. Многе од тих ствари се ослањају на оно што зовемо област правила у циљу да прочита кориснику шта је присутан на страници. За оне људе који не могу да виде, морате да будете сигурни да су ови читачи екрана заправо може покупити садржај на страници и да заправо показују своје кориснике, Ако не можете да видите, бар још увек може да разуме садржај на страници. Да. Ок. Довољно говори о добром дизајну. Хајде да причамо о лошем дизајну. То су ствари које не би требало да урадите. Може ли ми неко рећи о својим искуствима са Цраигслист и шта они мисле и није тако велика о овом дизајну? Да. >> [Ученик] Мислим да је то превише речи у једној области. Превише речи, зар не? Потпуно неодољив. Дошао си на ову страну и ви сте поздравио са читавим гомилом ствари до овде да не би ни битно за вас. На пример, можете живети у једној држави која не почиње тим словом. Рецимо да живите у Тексасу или тако нешто. 

Морате да се померите скроз доле на страници да се на локацији сте у. Ја сам из Бостона, па хајде да погледам у Масачусетсу. Где је Масачусетс? Ох, то је овде. Ох, то је Бостон. Ок. Погледајмо Бостону. [Смех] Прилично велика, зар не? Авквард ствари тамо. [Смех] Рецимо да тражим негде да живе. Колико људи заправо користи Цраигслист? Тона вас. Постоји прилично лоши начини да се осврнемо на ово, али хајде да погледамо ово. Која је разлика између имг и ПИЦ? Може ли ми неко рећи? Ту заправо нема разлике. Они значе потпуно исту ствар, али имају различите ознаке за њих из неког разлога. Ако кликнем на Има слике, ништа се не дешава на страници. Ја стварно морати да кликнете Тражи поново да се нешто деси. Шта може бити боље дизајн одлука која може да се тамо ради? Ако сам кликом на тај филтер, вероватно желите да филтрирате по том акцијом или да се посебна категорија. Дакле, уместо да притиснете Тражи поново сам могао само да аутоматски уради филтрирање некако Гоогле стилу, где су га одмах ураде. [Малан] Али не чини као што смо видели до сада их треба физички доставља притиском Унесите најмање или кликом на дугме? Као што сте их видели до сада, ви заправо имате да кликнете Субмит да уради те ствари. 

Али, као што ће Томи вам показати у секунди, заправо постоје начини за вас тако да када кликнете на ту ствар он аутоматски може послати оно што ми зовемо АЈАКС захтев и добити податке назад и филтрирајте резултате моментално. Постоји тона ствари које су у реду са овим интерфејсом. [Малан] Да ли тражите Кембриџу? Има нешто мало аномалију овде где вам је стало Кембриџу а ти си све Вестфорд, Спринг Хилл, Вест Њутн и слично. Вероватно није идеално. >> Вероватно није идеално. Како бих могао да буде у стању да на кориснику искуство боље на овој конкретној страници? Да. >> [Ученик] Упутства. Ок. Упутства у каквој смисла? [Ученик] На пример, ствар по први пут корисницима који не знају ни шта је Цраигслист или не знате шта треба да урадите. Тачно. Дакле, објашњавајући шта је Мооре је на овој страници је важно. Ми смо заправо може рећи шта је корисницима ова страна је заправо за. Ако сам само ја у посети ово, ја видим гомилу локација. Ја чак и не знам шта они значе. Али што је још важније, само гледајући овог интерфејса, Сећам се да сам морао да се померите надоле тону ствари да пронађете одређену заједницу да сам стварно стало на томе. Шта је бржи начин сам могао да урадим? Да. [Ученик] Поделити их у Исток, Запад региона. >> Реду. Могао их поделити у више категорија које би ми брже одреди како доћи до тог места. [Ученик] Ставите падајућу листу. >> Реду. Ок. Могао би да користим падајући мени, јер ми имамо фиксну скуп ствари и могли смо да их покаже у падајућем менију. На тај начин он не заузима толико простора на екрану. Али чак и боље од тога, шта да радимо? Да. >> [Нечујан ученик одговора] >> Можеш да кажеш поново? >> [Ученик] Претрага кутија. Да, оквир за претрагу. То је одлично. Оно што ми заправо можемо урадити је ако се осврнемо на слајдовима, поље за претрагу. Аутоцомплете. Врло једноставан начин да претражујете кроз резултате које знате у сету. Ако почнем да куцате БО, само ми покажи све резултате које имају БО унутар њих. Тако сам се веома лако пронаћи одређену онај желим да идем у уместо да листате кроз ову заиста велику листи. 

Ово су све врсте заиста ниске виси воће да неко ко спроводи Цраигслист заправо може учинити како би се искуство на сајту много боље за њихову одређеног корисника. Ок. Довољно говори о лошим сајтовима. Хајде да причамо о Фејсбуку. Када је изашао на Фацебоок, а нарочито Фацебоок фотографије, било много других услуга у тренутку који би могао тачно исте ствари. Они су могли да организујете своје фотографије у албуме. Шта можете да урадите је да могу да их организују у сетовима као добро. Можете да их организују по датуму. Можете да урадите све ове посебне ствари. Али, да ли ико зна шта је Фацебоок фотографије експлодира у време када је објављен? Да. >> [Студент] Тагс. >> Тагс. Управо тако. Имамо Мило овамо, који је наш пас маскота са том ЦС50 Бандана. Можете видети да имамо ову функцију означавања у средини. А шта је Фацебоок фотографије тако интересантно са становишта употребљивости је да је то заправо дозволио људима преко то укључе своје пријатеље у њиховим фотографијама. За Фацебоок, пошто њихов сајт је посебно друштвени, Ради се о изградњи овакве друштвене атмосфере. То побољшава искуство фотографија много више јер они заправо могу почети говорећи: "То су везе између људи, а то су фотографије о људима заправо стало. " Део тога је и врста нарцизма. Људи воле да буду означени на фотографијама и такве ствари. Иако то није нужно добар људска особина, у исто време се заснива на добрим одлуке о дизајну јер људи заиста стало ствари као што је ова. Тако да је Фацебоок фотографије. 

Али, хајде да разговарамо Фацебоок уопште. Сигуран сам да многи људи овде имају мишљење о Фацебоок-у, и добре и лоше одлуке дизајн дизајн одлуке. Дакле, хајде да спрече или да буде срећан. Хајде. Знам све о теби користе Фацебоок. Неко мора да има нешто лоше да каже или нешто добро да кажем о томе. Да. [Ученик] У вестима хране има много ствари које ја стварно не брину о томе. Ова вест не феед показују много ствари које не би стало. Имате пријатеље на Фејсбуку, који нисте упознали за 2 или 3 године а ви видите њихове вести резултати ничу у вашем вести феед а ти стварно не занима то. Фацебоок је заправо потрудио да направи боље, и они заправо смо покушали да помере релевантне резултате на врху вести хране у последње време тако да заправо видимо ствари пријатељи који су релевантни за вас или ваших блиских пријатеља. Нешто друго? Да. [Инаудибле одговор студента] >> Можеш да кажеш поново? [Ученик] Огласи су релативно ненаметљив. >> У ком смислу? [Нечујан ученик одговор] Они немају светло на екрану, као и заставама. Ок. То је добро. Ако се сећате интернету из 90-их година - >> [Малан] сам тамо био. >> Био је тамо. [Смех] Можда се сећате светлећу ГИФ позадине, светлуцаве ствари, ГеоЦитиес стил врста ствари. То заиста није пример доброг дизајна јер је стварно удаљавања од садржаја. Јејл уметност сајт користи имати анимиране ГИФ као своју позадину и да не можеш прочитати ништа на страници, али претпостављам да је неко стварно разговарао са њима, а сада је то мало другачије. [Малан] То је много боље. >> То је много боље, као што можете видети. >> [Малан] О, да. Баш супер, само - Да. Ок. 

Део тога је и чинећи вашу страницу вероватно врло минималистички и веома разумљива тако ствари на страни тока на начин који је веома логично и не сметају једни на друге. Које друге ствари су добре или лоше о Фацебоок о Фацебоок? Хајде да овде имамо разговор дизајна. О. Вхере? Да. [Ученик] Нови Тимелине систем вам омогућава да претражите профил особе о својој прошлости. Оох, Тимелине. Хронологија је велика ствар, јер вам омогућава да ваше пријатеље стабљици назад када су били у средњој школи. Хронологија је добро, јер вам омогућава филтрирање садржаја кроз много брже, омогућава вам да пронађете ствари које би иначе сте предузели заиста дуго времена да пронађете Управо скроловања горе и доле, горе, горе, горе, горе, горе, као да идем назад у времену. Али онда постоји и нека врста недостатака на то у смислу корисничког искуства. Шта би то могло бити? Велики реч која почиње са П-Р. >> [Ученик] приватности. >> Приватност, зар не? Приватност је огромно искуство корисника питање. Ово је једна од ствари које мрзим највише Фацебоок сада. [Смех] [Малан] Као што сам сада. Давид није схватио заправо десило све до јуче. Дакле, сада зна да сваки пут када сам га ћаскају Знам да ме игнорише. [Малан] незгодан део сам заправо да га игнорише, и нисам знао да сам знао да га игноришу. [Смех] Приватност је велики проблем. Може ли ико овде ми рећи шта би било лоше у томе Фацебоок приватности поред тога што раде овакве ствари? Шта је посебно тешко да уради у вези са Фацебоок приватности? Та врста је сугестивно питање. Да. >> [Ученик] Сакријте своје фотографије из одређених људи. Тачно. Тачно, да сакрије своје фотографије из одређених људи. Они имају ову малу, мало дугме у горњем десном која вам омогућава да се пребацујете приватност фотографију. Њихова приватност опције су веома различити између различитих врста менија. 

Сам добио су много боље о томе недавно, али је то било случај да кад год сте хтели да спрече своје пријатеље да виде фотографије, Ви би требало да прође кроз веома компликован 5-корак процес буде као, дозволите ми да кликнете на ову везу, а сада пусти ме поново кликните, дозволите ми да поново кликните дозволите ми да одредите које људи не могу да виде своје фотографије. То није нарочито добар на делу Фацебоока јер тако много о корисничком искуству заправо им даје слободу да контролишете оно што људи могу да виде. Ми то зовемо контролу корисника и слободу. Ако не допуштајући корисницима да урадим на начин који је ефикасан и интуитиван, онда је ваше искуство корисник није баш сјајно уопште.  Хоћете ли ви желите да кажете нешто о Фацебооку? Како да укључим ово? [Онг] не можете искључите, а то је огромна грешка употребљивости од стране Фацебоока. Ова функција - Ја стварно гледао у њу јуче - Или то не можете да урадите, или се то негде сахрањен веома, веома дубоко у удубљења Фацебоока, јер ја не могу да схватим како да онемогућите ову функцију уопште. [Малан] Али понекад те одлуке нису очигледни јер ви сте нам дали доста корисних повратних информација о различитим апликацијама ЦС50 и сајтови који курс користи. Нисмо спроводи све ове захтеве и сугестије. 

Део који је за добијање толико захтева да је функција времена, али понекад једноставно само правимо свесну одлуку као, "Хвала за предлог, али се не слажемо." Па како сте заправо одлучите шта би требало да урадите ако ваш корисник мислим да треба да урадимо нешто чак и ако не нужно? То је у реду баланс између заиста слуша шта ваши корисници кажу и заправо има неку линију где ти кажеш, "Ми нећемо да урадимо оно што ти кажу корисници". И посебно, мислим да је цитат Хенрија Форда која сумира ово горе прилично добро. "Да сам питао људе шта желе, они би рекли да желе брже коње." Може ли ико некако задиркивао осим шта то заправо значи цитат? Није само да корисници знају шта желе, али то је више да - [Ученик] Они не знају шта је могуће. У делу они не знају шта је могуће. Теасе да осим мало више. Шта то значи? [Нечујан ученик одговор] То је добро. Оно што ја мислим да овде покушавамо да кажем је да људи знају шта желе. Они желе брже коње. Оно што заиста желим је способност да се креће брже, али стварно не знам медиј којим се постигне то. Када дођете у својим корисницима и ваши корисници вам кажем нешто и они вам рећи: "Ми желимо ове карактеристике и овим функцијама и ове функције", Ви не желите да нужно размишљати о, "Пусти ме напред "И спроводити оно што експлицитно кажу," али оно што желите да мислите о је, "Каква идеја могу добити од тога?" Шта они заправо желе? 

А одатле оно што можете да урадите је пројектовати нешто што задовољава те захтеве али не нужно на начин на који корисник очекује да буду задовољни. Дакле, за тако нешто финалних пројеката, у врло реално, шта је корисно хеуристички када је у питању доношење нешто боље, посебно ако дизајнер има ту ароганцију о њему чиме ли некако знају шта је најбоље, можда узети улаз из својих корисника, али како ствари иду о добијању тог повратне информације? У завршним пројектима, конкретно, шта даје оптималне резултате овде? Оно даје оптималне резултате - и ја ћу ићи преко ово друго - је овај процес развијања и онда тестирање и онда итератинг. Оно што ја подразумевам под тестирања је обично када дизајнирате нешто мислите да је то прилично добро, као, "Ја сам такав велики дизајнер Свако ће волети ово.". И онда си га ставио тамо и људи не свиђа из неког разлога. Оно што треба да урадите је да морате узети делове ствари које људи раде као и преправити ствари које људи не воле. Звучи као врло очигледан процес, али овај процес стално итератинг на врху онога што сте већ изградили је процес који вам помаже не само да усавршите своје сопствене вештине дизајн, али такође помаже да усавршите дизајн тако да људи заправо ценим ваш производ, чак више него што су раније урадили. 

Ја ћу ићи преко више конкретних примера онога што сте ви могли урадити. Као врста последњи пример производа, хајде да погледамо кајак. КАЈАК када је изашао био је веома, веома популаран. Може ли неко да погоди зашто? Које су врсте ствари желите о томе, ако сте га користили или шта су свашта вам се не допадају? Да. >> [Нечујан ученик одговор] >> реду. То је део тога је пустити корисник има упит који је експанзивнија од веома рестриктивне једног сличног, "Морате да одаберете датум почетка "И морате да одаберете датум завршетка." У ствари, то вам омогућава да буде флексибилна о томе и то вам даје све од летова у том опсегу. Нешто друго? [Ученик] Они укључују таксе у цени. Они укључују таксе у цени. Порези и ствари заправо иде равно у тој цени у горњем левом па нисте преварени да мисле да сте заправо плаћате за $ 240 лета када је заиста $ 330. Нешто друго? Да. [Нечујан ученик одговор] Нисам сигуран да ли су они заиста дозволити да то урадите. Можда сам погрешио. То би могло да буде занимљиво ствар ако желите да ставите више тежину на одређеним филтерима тако да су гурнути резултате који се односе на тај филтер до врха. Али, може ли ми неко рећи шта је то тако посебно у вези овог левој страни? Како сте се традиционално потражили лет на Интернет сервису пре овога? 

Да. >> [Нечујан ученик одговора] >> Можеш ли да кажеш да - [Ученик] Свака авиокомпанија. >> Да. Свака компанија има свој сајт. Ова консолидује ствари. И? [Ученик] Ви тачно знате колико одлазиш. Ви не знате тачно у које време да одлазиш, али у вези са филтерима посебно. Дозволите ми да се попните кајак. Ох, Боже, поп-уп. Лоше искуство корисника. Шта се дешава када померите овај клизач? [Студент] Аутоматске исправке. >> [Онг] Аутоматско ажурирање. То је нешто што је веома важно. Пре тога, кад год сте желели да погледате горе лет, морали сте да ставите у свој унос локације, ваша излазна локацију, притисните Сеарцх, то би обрадили то и показати своје резултате. Ако сте желели да промените свој упит, морали бисте да притиснете два пута, ући у новом упиту од нуле, а онда то урадите изнова и изнова. Лепа ствар о нечему као што је ово што користи врло [неразумљиво] ствар у средини. Кад год нешто овако, она пуца искључен захтев и он вам даје све резултате одмах. Ова врста непосредне повратне информације је нешто што је невероватно популаран КАЈАК јер то је заиста лако за мене само да променим свој упит и да схватим ствари које су око одређеног опсега без потребе да се иде напред и назад, назад и напред, назад и напред. Дакле, то су све врсте ствари које желите да мислите о томе када сте дизајнирање веб сајт. Како могу направити врло ефикасан за моји корисници да иде кроз све они раде на и доћи до њиховог коначног циља што је брже могуће? [Малан] А да Јосифовом тачке раније о корисницима не нужно знају шта желе, на основу онога што ви сада знате о ХТМЛ и имате кућице, радио дугмад, меније изаберите, улазне поља и слично, како бисте имплементирали појам брање почетка времена за лет? 

Који од тих различитих корисничких интерфејса механизама би сте користили? Ако само знате количину ХТМЛ који је предавао пре и знате су инпути радио дугмад, поља за потврду, дроп-падови и улаз кутија, шта би ваш природан избор су за брање датуме? [Ученик] улаз. >> Улаз. Или можда чак и падајући са свим датумима, зар не? Тако је и са сложенијим УИ механизама као што је овај на левој страни да бисте могли да имплементирају, можете направити овај процес много више интуитивно са клизачем јер време је непрекидан, а људи обично не размишљају о томе у смислу дискретних комаде. У реду. Посљедња ствар. Десет употребљивости хеуристике. Све ствари које смо причали вероватно пасти под једну од ових категорија. Ако одете на овај линк, који ће бити сајтова на мрежи објављена, ћете заиста моћи да, како да дизајнирате свој сајт, имајте на уму ове хеуристике и ова правила палца. За ваше пројекте, шта ја предлажем да урадите у циљу осмишљавања ваша апликација боље је да се прво уради прототипова папира. Када размишљате о својој апликацији, врло брзо скицирати шта желите да изгледа и уверите се да су све кутије су распоређени на начин који је веома интуитиван за корисника да користе па чак и покажем ове прототипове папирним вашим пријатељима и почети фокус групе. Само се 2 или 3 особе заједно и замолите их да само тапните на овим папира прототипова, и показати им нове екране да види да ли они заиста разумеју шта се дешава. 

Шта желите да урадите је да им је задатак, мотивисати тај задатак, и само им дати апликацију и нека га користи. Не дајте им упутства изван тога. Хоћеш да се заиста нека интеракцију са апликацијом на начин који вам омогућава да видите како би га користити ако нисте стајали поред њих. И то је веома важно. То ће вам дати много увида да су људи добијају око одређених ствари на начин на који их нисам намеравају да? Да ли они користе посебне механизме УИ на екрану на начин да је некако Хацки? Нисам имао намеру да они то раде на тај начин. А када завршите са тим, шта желиш да радиш? Ваши дизајн стене, зар не? Шта желите да урадите је да желите да се развију и онда тај процес изнова. Дакле, показују га са пријатељима када сте га развили, тестирали, развијају, тестирају, развијају, тестирају, прелазили на даље и напред. Дизајн је веома итеративан процес у том смислу. Ви заиста треба да се изгради нешто и онда схвате ствари о томе да нисте схватити пре и врати и побољша од тога. Сада, као и за развој делу, то је оно што Томи ће вам показати после паузе и како би могли да спроведу несто довршавање на начин који је прилично једноставан. [Малан] Као Томи поставља овде, онда питање. Много од најранијих сајтовима - и када Џозеф рекао 1990-их стил сајт, то је имплементација где ако сте желели да изаберете време почетка и краја времена, искрено, назад у дан, па чак и на неким сајтовима данас, начин урадите је да изаберете један сат из падајућег, изаберете минута од падајућег, можда ПМ изаберете, АМ, и онда ти да још 3 пута. И тако са 6 кликова и можда неки скроловања Ваш корисник може заиста пружити неку врсту датума и / или времена опсег у овом смислу. 

Дакле, дефинитивно субоптимална а опет тако далеко смо видели никакве изражајне могућности ни у једном од језика које смо гледали да уради нешто више секси овако клизачу за време почетка и краја времена. Али ако помислим на недељу 0, када смо разговарали о Огреби, тамо није било додаци који само радили одређене ствари. Управо си стварно имао ове претпоставке, као што су петље и условима и слично. Тако некако размишљам само веома апстрактно сада, независно од појединостима ХТМЛ, Шта се стварно дешава са нечим као што је овај старт време и крајње време слајдер? Када сам померим миша и кликните на тој малој шаргарепе симбола на левој и почети драггинг, програмски, шта је то што желите да будете у стању да имплементира да би се то десило? Која питања, шта Булове изразе желиш да буде у стању да питам? Шта се заправо дешава? Самми? [Ученик] Где је положај курсора? >> Добро. Где је положај курсора? То је нешто што нам је било потребно да изразимо поново у Огреби, да ли је заснован на локацији или чак боји или слично. Можда се сећате икада тако кратко је у понедељак било све ове ствари називају догађаји у свету Веб, па има ствари попут онцлицк и онкеипресс и онкеиуп и онмоусеовер и онмоусеоут. Тако схватају да чак и ове ствари које смо узимали здраво за готово, на Вебу са сајтовима као што су Фацебоок и Гмаил, чак и ако немају појма како сте вероватно би спровести, јер не постоји ништа ни њему као у предавању Проблем или Сет 7, схватите да са овим потпуно истим основама, са ХТТП и параметрима и ГЕТ и ПОСТ, са основним ХТМЛ инпута који смо тестирали до сада и у једном тренутку са програмским механизмима који Томми о томе да уведе можете почети да се изрази као што сте урадили у недељи 0 је веома интуитивно превлачењем и отпуштањем. 

Дакле, са тим рекао, Томми МацВиллиам и неке нове делове слагалице за нас Веб. У реду. Моје име је Томи и ја ћу да причамо о ЈаваСцрипт. Само дисцлаимер: ја сам мишљења да је ЈаваСцрипт најбољи програмски језик у целом свету целом. Постоји много људи који се не слажу са мном, али то је само невероватно. Када се вратимо на Ц, ако морате да пишете Ц за другу класу или неким другим језицима, то је само стварно фрустрирајуће у свим ниског нивоа детаља које треба да се заплести за Дакле, ако сте се икада осећате тужно како досадне Ц је да пишем, само да се вратимо, напишите ЈаваСцрипт. То је нирвана. Ви ћете се осећати много боље о свом лошем дану. Много магије ЈаваСцрипт долази из његове способности да манипулише ствари који су већ на страници. Када смо писали наше ПХП скрипте, они су погубљени на серверу, и на крају да ПХП скрипт вероватно резултовати неке ХТМЛ. То је ХТМЛ шаље клијенту, а онда то је то. Ако ПХП хтео да додате дугме на страници, на пример, не могу да урадим то. То би требало да донесе потпуно нови ХТМЛ фајл и посаљите то бровсер. Са ЈаваСцрипт знамо да можемо ажурирати ствари док су они већ сте на страни, и због тога можемо пружити много више инстант повратне информације, који ће заиста побољшати корисничко искуство на нашем сајту. Само брза рекапитулација ЈаваСцрипт селектора. Ми знамо да када смо преузели ХТМЛ страницу, који ће бити представљени у Дому. 

ДОМ запамтите је само ово велико дрво где су елементи повезани у овом великом хијерархији. Када смо радили са базама података у псет 7, једна од првих ствари које су потребне да знамо како да то урадите је упита базе података. Имамо овај велики корисници табелу, а понекад само желимо да кажемо, "Ја само желим неке од ових корисника који одговарају неки услов." Слично томе, када имамо ДОМ морамо на неки начин да га упита. Морамо на неки начин да каже: "Ја желим све тастере који изгледају овако "Или све слике на страни." А ови селектори нам омогућити да то уради. Дакле, само брзо рекапитулација. Ово прво овде, ово # поднесе, шта ће то изабрали? Да ли се ико сећа? [Нечујан ученик одговор] >> Да, тачно. Ово ће изабрати елемент на страници која има ИД поднесе. И тако то хашиш ознака каже да селектор ће да ради са личним картама. Како о другом, ова центриран, шта. Ће то изабрали? Да. >> [Ученик] класа. >> Тачно. То ће сада да изаберете према класи. Разлика између личне и класе овде је генерално ИД треба да буде јединствена у шта год простор трагате преко. Дакле, ако сте тражили преко целу веб страницу, заиста би требало да има само 1 елемент са том одређеном ИД, тако да у овом случају поднесе. Са класа, с друге стране, можемо имати више од 1 елемент на истој страни са исте класе. То може бити корисно за кажем да желим да изаберете све што центрирану на страници него само 1 ствар. 

И коначно, овај последњи овде је мало компликованија, али шта ће ово да изаберете из ДОМ? [Нечујан ученик одговор] >> Шта је то? [Ученик] Све је то ознака. >> Имамо 2 дела. Други део ће рећи Желим да изаберете ове ознаке са ознаком на улазу, тако да било који елемент који је улаз ознака. Али ја не желим само да изаберете све улаза зато што нешто попут субмит дугме може бити улазни и нешто као текст могао бити улаз. Тако је и са овим угластим заградама Кажем само да изаберете оне елементе које су од типа текста. Негде у мојој ХТМЛ тагу имам атрибут зове врста, и вредност тог атрибута мора бити текст. Па како о овде овом првом делу? Прва реч овог селектор је форма онда имам простора и онда овај улаз део. Шта то раде, стављајући форму испред ње? Ово ће у суштини ограничити упит. Могло би се десити да имамо неке улаза на страници који нису потомци форми. Шта ће урадити је да ће рећи да сам само желим улазне ознаке које имају негде изнад њих неки родитељ елемент форме. И тако на овај начин можемо да те више хијерархијске упите тако да не само да изаберете одговарајућу све дати селектора. Можемо врста ограниче тај упит на нешто друго. Дакле, сада знамо како да изаберете елементе на страници, хајде да причамо мало о АЈАКС. Ајак је и даље веома тренди акроним који се залаже за асинхрони ЈаваСцрипт и КСМЛ. Тако се дешава да само КСМЛ је само неки начин представљају податке. 

Та врста изгубљене популарности недавно, тако да Кс у АЈАКС се не користи све време. У суштини, оно што АЈАКС нам омогућава да урадите је да ХТТП захтева из контекста ЈаваСцрипт. Када смо у нашем веб бровсер и ми навигацију кроз странице и кликнемо на линк, шта је наш претраживач ће да урадите је да ХТТП захтев год линк да кликнете. Али то није увек идеално, јер ако је то случај, онда као Давид је рекао, увек морамо да корисници кликну на дугме Пошаљи или кликните на везу да би се нешто деси то ће укључити ХТТП захтев. Тако је и са АЈАКС можемо направити ове захтеве у име ЈаваСцрипт. То значи да кад год корисник интерагује са стране или било шта догоди, ми заправо можемо направити програмску захтев некој другој датотеци ПХП на нашем сајту или било шта друго и преузимати податке које тај фајл избацује. Хајде да погледамо пример АЈАКС. Ово је наш ЦС50 финансија страна са које, надамо се неки од нас су упознати. Ако гледамо на ХТМЛ стране, ми смо овде да сам додао пар ствари, од којих сам дао ову форму легитимацију. Ја сам рекао ид = "форма-цитат". Урадио сам то само зато што ће то учинити ово мало лакше изабрати из ДОМ пошто сам може да направи врло једноставан упит. Оно што желим да урадим овде јесте да желим да поправим неки проблем са ЦС50 финансија. Дакле, ако одемо у финанце.цс50.нет, сваки пут кад желим да добијем понуду, морам да кликнете на овај Гет дугме цитат, и да Набавите Цитат дугме онда ме води на другу страну целе. А ако желим још цитат, морам да удари на дугме Назад, а затим сам га укуцате, Ја добијем цитат, и ја сам ударио дугме Назад. Ово стварно није најбоље корисничко искуство. Ко би заиста користити сајт ако је то тако споро да се цене акција? Дакле, оно што ми желимо да урадимо са Ајаксом је уклонити ту корак иде на посебној страници како бисте видели резултате. 

Оно што стварно само тражим да стварно мала цена, и то је само заиста мала количина података. Дакле, нема потребе за мене да одем још целу ХТМЛ страницу, преузети потпуно нову групу ХТМЛ, можда преузети још неке слике, неки други ЦСС датотеке само за мене да одговорим на то питање врло једноставно колико кошта ова акција кошта. Са АЈАКС можемо направити ово много лакше. Видимо овде да сам повезивање у ЈаваСцрипт датотеку под називом куоте.јс. Хајде да стварно отворим тај фајл. Није тамо. Сви моји ЈаваСцрипт датотека ће се налазити у ХТМЛ тако да бровсер може да приступи. Онда имамо посебан директоријум овде за ЈаваСцрипт, и сада је овде куоте.јс. На врху овог фајлу то овде каже да ја желим да чекам целу страницу да се учита Пре него што покушам да урадим нешто. Зашто је то потребно? Испоставило се да је следећа ствар ћу да урадим овде је почетак у потрази за елемент који одговара неки селектора. Ако је ово ЈаваСцрипт је икада изведен пре овај елемент убачен на страници, онда је све трудим да урадите је да неће да ради јер ћу покушати да изаберете нешто што не постоји још увек. Дакле, ова линија се врху каже желим да сачекате док се све учита тако да смо гарантовано да било елемената тражим заправо на страници. Овај знак за долар овде значи ја користим библиотеку под називом јКуери. Овај јКуери библиотека нам дозвољава да користите ове селекторе који смо управо гледали. Говорећи $ тада пролази се као аргумент ово # форму цитат, Сада сам изабрати тај образац који смо управо узели погледамо. Сада имам представу том облику у меморији некако. 

На овом објекту сада, ова представа форми, Сада сам помоћу функције позвали. Шта ова функција ради је да ће се за прикључивање хендлер догађаја. Догађај који ћемо да слушамо јер је субмит догађај. Дакле, када корисник кликне да дугме Пошаљи или притисне Ентер, овај догађај ће отпустити. До скопчавање у ово, ја сада могу надјачати подразумевано понашање обрасца. Без овог ЈаваСцрипт, форма ће доставити год ПХП фајл смо у тој акцији атрибута. Али уместо тога, ја сада говорим, чекај, чекај, чекај, ја не желим да ствари да урадим. Желим да се то деси пре него што одете и покушати да поднесу неку ПХП фајл. Сада шта желим да урадим? У овом тренутку желим да користите АЈАКС некако да се учита у ком цена акција јесте. Прва ствар коју треба да знате је оно залиха корисник гледа горе. Да бисте то урадили да ћу да употребим другу селектора. Ово је трећи селектор смо гледали раније. То говори да желим да кренете овај елемент обрасца са ИД форме-цитат. Онда негде унутар тог облика мора да постоји улаз елеменат која има име симбола. Ако се осврнемо на нашу ХТМЛ, видели смо да смо имали улаз [име = симбол]. То значи да ће ово да изаберете тај оквир за текст који корисник куца у. То је лепо. Имамо оквир за текст. Сада нам само треба да знамо шта је унутар њега. Да би то урадили можемо назвати овде овај метод, овај Вал., и то казе знам шта текст имате. Хоћу да ми кажеш шта је корисник унео у тај текст. Сада имамо ниску зове симбол који је једнак год корисник унесе То је лепо. Можемо користити тај стринг сада да наш захтев. То је овде нова функција, ово $, осим што се више не дешава да се избором елемената, ћемо звати другачију функцију која је пружена нам је јКуери. Ова функција је АЈАКС шта је заправо дешава да овај ХТТП захтев. Зато морамо да га кажем неколико ствари. Прва ствар коју морамо да испричам ову функцију је место где желим да идем захтев. Негде у мом пројекту имам тај фајл унутар ХТМЛ директоријум зове куоте.пхп. Ја могу да приступе овом датотеку, видели смо, само овако, ако одем у лоцалхост / куоте.пхп. 

Желим да мој ЈаваСкрипт да поднесу захтев на ту страну. Који тип захтева сада? Видели смо раније да је форма има тај метод = "пост" атрибута, а то значи да ће направити ПОСТ захтев, тако да неће ставити ништа у УРЛ-у, него ГЕТ захтев, што би само бити отпуштен ако само приступити страници са Веб бровсер, на пример. Сада смо рекли желим да ХТТП ПОСТ захтев на страници се налази на куоте.пхп. Када смо достави образац, сећате да смо могли да приступите елементе улазне унутар тог облика са тим $ _ПОСТ променљиве. До сада у причи нисмо заправо шаље заједно икаквих података још. Управо смо рекли да смо прављење АЈАКС захтев и овде је тип захтева снимамо. Сада морамо да се заиста пошаље неке податке на страници. Да би то урадили можемо користити ову некретнину зове подаци. Вредност ове имовине је заправо асоцијативна низа. Разлог за то је што нам омогућава да пошаљете више од само 1 комад података. Зато имамо ове витичасте заграде овде угнездио унутар ових других заграда. Тастери у овим асоцијативним низовима ће бити исто као и они име атрибута у нашим образаца елементима. То значи да ако ја пошаљем дуж кључа симбола, то значи да је мој ПХП страница може приступити ове податке са _ПОСТ [$ симбол] баш као што смо и раније када смо били подношења обрасца. И сада су стварни подаци које желите да пошаљете ће бити вредност унутар овог асоцијативног низа. 

Чувају овај текст смо у променљивом зове симбол, па шаљемо заједно сада кључ симбола и вредност без обзира корисник унесе Сада смо направили овај ХТТП захтев, наша ПХП датотека је погубљен, и то ће да пошаље неке податке назад до клијента да само направио овај захтев. Сада морамо да одговоримо на било сервера нам је рекао. Да би то урадили морамо ову последњу имовину овде зове успех. Вредност овог кључа успеха заправо ће бити функција, и ово је један од заиста кул ствари које можете да урадите са ЈаваСцрипт. Не само да можете да имате Интс или низове као вредности унутар једног асоцијативног низа, можемо имати функцију. Дакле, рекавши успех, ово је мој кључ. Дебело каже ево вредност, и сада је вредност то је заправо функција. Дакле, ми не треба да дају ове функције име по себи. Ми само можемо рећи да ће то бити нека функција. То ће узети 1 аргумент. Аргумент за ову функцију ће бити год сервер нас је послао назад од захтева. Баш као када је наш претраживач подноси захтев, сервер шаље нешто заузврат и прегледач приказује, у контексту АЈАКС смо управо направио захтев, сервер шаље нешто назад, и сада смо да су представљени као стринг. Са том низу Ја бих само желео да прикаже да је на страници. Да бисте то урадили да ћу имати једну последњу селектора. Желим да изаберете елемент са ИД цени. Ово је само празна див који сам направио на страници, и желим да поставите садржај тог див буде шта год сервер нас је послао назад. Заправо сам пут куоте.пхп мало. 

Уместо позивања рендер и пружање неку страницу, куоте.пхп сада једноставно иде да одштампате вредност акција као ниске. Дакле, ако сте били да се заиста посети страницу, можете само да видите ту малу жицу било какве цена акција јесте. И последња ствар коју морамо да урадимо је само да ли ова функција враћа фалсе. Шта ово каже је да ако сам унутра сам неког догађаја руковалац и тај догађај руковалац враћа лажно уместо враћања истина, то значи да не желим оригинални догађај да пуца. У том случају, ако нисмо имали и ЈаваСцрипт смо поднели образац, наш веб бровсер ће рећи: "Ја ћу да заједно послати те податке" и они ће вас послати на другу страну. Зато смо користите АЈАКС сада, нема потребе да се пошаље корисника на другу страну. Само ћемо да прикаже резултате динамички на овој истој страници. Ми заиста не желим да идем нигде, а ја желим да останем на истој страници. Дакле, по повратку лажна, осигурали смо да се облик не ради за нас. Хајде да погледамо шта је то заправо изгледа. Наша страна цитат изгледа исто. Дозволите ми да се попните инспектора овде доле, тако да можемо видети шта се дешава. Нека мало мање огромна. Запамтите, ако смо отворили картицу Нетворк, ово је место где можемо да видимо све ХТТП захтева који се дешава на страници. 

За симбол дозволите ми да откуцате ААПЛ и кликните Гет Цитат. Сада смо видели да удео Аппле кошта нешто више од долара Управо се појавио на страници, али УРЛ адреса није променио уопште. У ствари, овде је ХТТП захтев који смо управо направили. Ми смо направили ПОСТ захтев куоте.пхп. То има смисла. То је оно што нас је послао сервер назад. То више није тај гигантски ХТМЛ документ са сликама и слично, то је само линија текста, и онда ми само приказује линију текста. Ако се вратимо на заглавља и видети шта смо заправо послали унутар овог ХТТП захтева, можемо видети овде који смо послали дуж кључу симбола и вредности ААПЛ, што је оно што корисник унесе То је лепо, али то је још увек мало нервира. Имам још да кликнете на ово дугме да бисте добили цитат залиха. Ми смо заузети људи и немамо времена да кликну дугмад. Гоогле схватио ово мало пре када они спроводе Гоогле Инстант. Шта Гоогле инстант ради је као куцате само почиње приказивање резултата за вас тако да не морате да бринете о још кликом Тражи. Заправо, забавно прича у вези са тим. Након што Гоогле Инстант изашао, људи су били у фазону, "Вау, ово је супер невероватна." "Ово је тако кул." И студент доле у ​​Станфорду, који је био 19 година у време направио овај сајт под називом ИоуТубе инстант. Све ИоуТубе Инстант нема ефикасно претраживати ИоуТубе одмах. Дакле, уместо да иду на ИоуТубе.цом и ударио Сеарцх, када почнете да куцате у ИоуТубе Инстант нешто попут ЦС50, можемо овде видети да је то покушај да се на споре Интернет везе попунили ови резултати уживо. Да би то урадили ми заправо можемо направити врло једноставно модификацију нашој датотеци куоте.јс. Сада смо прикључивање овај догађај када се образац подноси. Ми заиста не желимо да корисник поднесе више тај образац, па хајде да уместо ватру овом догађају сваки пут када корисник притисне тастер. Да би то урадили прво да промените овај догађај из достави кеиуп. То значи да уместо да чекају образац да поднесе, сваки пут се притисне тастер, нешто ће се десити. Он нема више смисла да приложите овај догађај кеиуп целој форми. Ми смо само стварно стало том пољу за претрагу. 

Да бисте изабрали да сада, можемо да променимо то бити, него форме цитат, форма-цитат и ми ћемо имати улаз (Тип = текста), или можемо рећи (наме = симбол) - год желимо. Сада постоји једна последња ствар морамо да урадимо. Сетите доле када смо рекли повратак лажно смо рекли да не желимо да стандардна догађај на ватру. Али тако једноставно дешава да ако се онемогући да сада, год куцамо у неће појавити у прегледачу више јер би то било уобичајено понашање да куцате у текст. Ми не желимо да заобиђете да, па да уништи овај повратак лажна. Ако се спасе и поново учитате страницу, сада када почнем да куцате ААПЛ видећете да је цена акција на дну овде се аутоматски завршетка. Дакле, овде је ЦС50 финансија инстант. Заправо забавно прича о ИоуТубе Инстант је да студент некако је написао као 1-ноћ пројекта, а сутрадан му је понуђен посао у ИоуТубе ЦЕО. Дакле, једноставно као да сте ЦС50 студенти, ваши коначни пројекти можете добити посао на ИоуТубе. Нешто као да је стварно супер идеја за коначни пројекат, зар не? Имали смо неке постојеће функционалности које смо хтели да се интегришу са. Ми побољшавамо кориснички доживљај мало, и одједном тражи нешто на ИоуТубе Инстант можда много лакше него потрази за њом на редовној ИоуТубе. Дакле, то је АЈАКС укратко. 

У примерима који показују Јосиф, видели смо доста аутоцомплетес, и те аутоцомплетес су заиста, заиста згодна јер не морате да памтите - На пример, ако се не сећате цену залиха за Аппле а ми само знамо да је аа нешто, него само кажем да ми, "Учешће ове ствари кошта толико новца" Ја бих некако бих да знам шта залихе почети са АА. Можемо то заиста лепо са боотстрап библиотеци која је већ укључивала унутар ЦС50 финансија. Ако сте дошли овде да ЈаваСцрипт ознаке и дођите до Типеахеад, ово је само леп додатак да је неко вец написао за нас, а лако можемо употребити свој функционалност овако. Откуцан сам и овде је листа неких држава које почињу са А. Хајде да кажем да мислим да је ово стварно кул и да је време за мене да укључи ово на мојој страни. Испоставило се да је то стварно једноставно. Хајде прескочи овде да куоте3.јс. Мој фајл изгледа мало другачије. Овде доле све моје ствари АЈАКС је исти. Желим да учита податке акција без потребе да се иде на другу страну. Али сада желим да користим овај додатак. Тхе боотстрап документација има велике примере како тачно могу да урадим. Хоћу да кажем: "Ево улаз који желим да довршавање даље" и ја ћу да позовем ову функцију зове типеахеад, и да ће да обради све Типеахеад ствари за нас. То ће иницијализовати листу, он ће учинити све наше филтрирања. Једина ствар коју треба да знате је шта подаци смо аутоцомплетинг даље. Тако сам сазнао на овај тастер само читајући документацију и гледа на примерима. Ако сам му дати кључ извора, вредност овог кључа само су неки низ ствари које желим да довршавање даље. Ова променљива је из ове друге датотеке. Ја отворим симболс.јс. 

Ово је само симболс.јс ово стварно, стварно велики низ садрже низове свих ових акција симбола из НАСДАК. Ако желим да се вратим скочи на ХТМЛ, тако јхарвард, вхостс, глобалхост, ХТМЛ, предлошци куоте_форм. Будући да се сада зове куоте3.јс, дозволите ми да промените ЈаваСцрипт фајл сам овде, укључујући. Сада имам куоте3.јс, па ћу да се учита у том посебном ЈаваСцрипт фајл, онај који има тај боотстрап аутоцомплете. Сада када сам скок назад у прегледачу, поново страницу, и почнем да куцате, АА, ту је мој аутоцомплете. И заиста је било тако једноставно. Имао сам 1 линију кода који само рекао: "Овде су ствари које желим да довршавање даље" и одједном имам овај стварно леп функционалност са не много напора уопште. Као да сте у развоју сајтова и нарочито предњи крај страни ствари, ћеш наћи да је ово случај много. Постоји много, много, много заиста сјајних бесплатних библиотека тамо да би се супер лако урадити нешто овако. Може ли ико мисли о било недостатака једноставно аутоцомплетинг на овом великом списку симбола? Шта би могло да буде нешто што није најбоље са овим приступом? Да. >> [Ученик] време, ако имате пуно [нечујан] Да. Сада смо преузимањем овог огромну ЈаваСцрипт фајл и има доста симбола. И тако ако имамо гомилу ствари, ова врста може повећати кашњења не само тражење али и преузимање стварне датотеке. Сјајно. Нешто друго? Сада нема смисла стварно релевантно. Ако укуцамо у А, компаније које показују овде можда неће бити најпопуларнији компаније које почињу са А. 

Пре него што дођем до Аппле, можда ће бити потребно још неколико знакова да пронађете оно што тражим. Ово аутоцомплете нема овај осећај важности. То ће рећи, "Све што се подудара ћу приказати." Уместо тога, ја бих некако да се интегришу одређену релевантност у мојим претрагама. Ако ја одем овамо на Иахоо! финансија, финанце.иахоо.цом, Ако покушам да унесете симбол на страни Иахоо! финансија и почнем да куцате ГООГ, имам овај леп списак ствари. Јасно, то изгледа као Иахоо! Финансије ради нешто паметнији овде. Они имају неку релевантност и они такође имају додатне информације као име залихе. То је нешто што ја не могу да добију само са мојим стоцк листи симбола. Желим ово па ћу да га узме. Да би то урадили хајде да урадимо неке ствари. Хајде да прво отворити инспектора на овој страници јер смо видели да ова страница није претовара на све, тако да вероватно користи АЈАКС некако да се учитава своје податке. Можемо сазнати шта је то подаци утовар. Ако кликнем на овој мрежи картици, оне ће бити све захтеве које почињу да буду отпуштени. Сада, ако укуцамо у гоо, можемо видети да сам добио нови ХТТП захтев. Ово је вероватно да се подаци где се долази. Наравно довољно, ако погледате ову УРЛ адресу, која је мало чудно име, можемо видети да је ово тацно где Иахоо слања своје податке. 

Направио сам посебан фајл под називом суггест.пхп који је веома сличан духу на проналажење функцију. То је у основи ће направити упит УРЛ Иахоо, врати неке податке, и послати га на мене. Сада, уместо да користите ову велику, огромну листу симбола, Ја могу да користе Иахоо лепе ствари релевантности, а ја не морам да преузмете ту огромну ЈаваСцрипт фајл. Само ћу да се повуче низ ствари релевантне симболе акција. Хајде да скочи у то. Дакле хтмл, јс. Сада смо у куоте4. Сада смо се више не користе ту велику листу ЈаваСцрипт фајлова. Али овде је мала врста дизајна проблема. Рекли смо да у АЈАКС је асинхрони. Шта то значи да кад сам направити АЈАКС захтев, па овде на линији 8, ово је место где је мој АЈАКС захтев је заправо пуцао. Рецимо сада имам код овде то ће урадити неке ствари свиђа упозорава корисника или промени нешто на страници. Шта се неће десити прегледач неће чекати овај захтев да се настави пре доласка доле и удара ову линију. То је асинхрони део. То ће учинити овај захтев и рећи: "Кад завршите, "Врати и позвати ту функцију коју сам вам рекао да позовем унутра успеха." То значи да не можемо преузети унапред све залихе. Морамо да захтев и чекати да се нешто врати. То значи да пре него смо једноставно могли рећи боотстрап, "Ево списак ствари хоћу да довршавање даље." Ми више не може да се висе јер ми не знамо оно што ми желимо да се заиста аутоцомплете даље. Срећом, боотстрап мислио јер су то паметни момци тамо, и они заправо нам дали још један начин да се учита тај Типеахеад плугин. Пре тога, вредност овог извора имовине била само овај велики спектар ствари које довршавање даље. 

Сада извор имовина је у ствари функција, и сврха ове функције је да схватим шта је оно на довршавање о су. Начин ће се то схвати је да ће то аск финансије Иахоо! оно најбоље ствари у довршавање су. Да бисте то урадили да ћу направити врло сличан АЈАКС захтев. Ја ћу тражити ову страницу на суггест.пхп. Желим да пошаљем дуж симбола даље. А сада мој успех, боотстрап документација ми је рекао да у циљу попунили тај списак ствари, све што треба да урадите је да прође у овом низу сада на повратни функцију. Али чекај мало. Ако ово треба да буде низ и АЈАКС ме шаље назад текст, како је то могуће? Ово уводи нови начин размене података зову ЈСОН. У овом случају ми не само шаљу једноставну ниску текста. Сада се бавимо овим сложеније листе залиха симбола. Ове деонице може да садржи ствари као што име компаније или текућим ценама. Само помоћу велики дуг низ који није обликован на било предвидив начин неће бити најбољи начин да се ове податке са сервера Иахоо за мене на начин који лако могу разумети. ЈСОН је технологија која користи предности како смо креирали асоцијативне низове у ЈаваСцрипт. Ово изгледа доста налик на ЈаваСцрипт асоцијативне низу, и, у ствари, то је зато што јесте. ЈСОН је скраћеница за ЈаваСцрипт Објецт Нотатион. То је у основи договорен формат за пренос података и назад. Ево ово ЈСОН објекат или ово ЈСОН асоцијативног низа је да ми шаље неке податке о курсу. 

Тастери овог низа су ствари попут Наравно да има вредност цс50, и овде доле се види да могу да имају једну вредност која је низа. Не морам да радим такве ствари изузме жицама и тражити зарезима и раде луде ствари тако. Јер ово је декларисана у овом ЈСОН формату, ЈаваСцрипт и јКуери већ имају функције за претварање ниску који изгледа овако ЈСОН у стварном ЈаваСцрипт асоцијативне низу да можемо да радимо. Доинг то је једноставно као рекавши да више није овај фајл, суггест.пхп, слања ме назад једноставно низ текста, али знам да ће да ме шаље назад ЈСОН. То значи да је ЈСОН може конвертовати у ЈаваСцрипт асоцијативног низа. И тако јКуери, ја бих вас да урадите то за мене. То значи да је овај параметар одговора овде, ово више није само ниска. Зато смо рекли да је овде у питању јКуери неку ЈСОН, јКуери ће бити довољно паметан да каже: "Хтео ЈСОН?" "Идем да конвертује то у асоцијативним низ за тебе." Хајде да ствари погледамо на мрежу картици када имамо куоте4.јс. Ми ћемо ово променити и поново учитате страницу. Сада ћу да куцате-поново. Направио сам пар захтева за суггест.пхп, али сада овај одговор, него само тетиве, то је ЈСОН. Дакле, имам отворену коврџаву протезу каже: "Ево асоцијативног низа." 

Први и једини кључ овог асоцијативног низа се назива симболи, и онда овде је низ свих релевантних симбола долазе сада из Иахоо! финансија, а не из тог гигантског списка. Тако сам једноставно да попуните овај АутоЦомплете плугин са неким подацима који се не долазе са локалног фајл који је већ унапред одређен али од нечега другог. Испада да смо ми заправо можемо искористити технологију зове ЈСОНП, или ЈСОН са поставом, која ће елиминисати тај суггест.пхп посредника. Али уместо да ради, хајде да уместо тога погледамо како могу побољшати ово још више. Ја стварно волим Типеахеад боотстрап-а. То је заиста лепо. Али ми смо све добро ЈаваСцрипт и желимо да мало урадили сами, Можда погледамо шта овај плугин може да ради. Хајде више не користе ту Типеахеад ствар, и хајде да покушамо да ову листу предложених акција сами. Овде у куоте6.пхп ћемо кренути на исти начин. Сваки пут врсте неко нешто, желимо да направи АЈАКС захтев. Ово је слично нашем оригиналном ЦС50 финансија Инстант. Уместо да захтев куоте.пхп, сада правите захтев да тај исти фајл као и пре, ово суггест.пхп, који је само ће да повуче податке из Иахоо! финансија. 

Опет, ми смо још увек очекујемо ЈСОН, али сада пошто Типеахеад не ради за нас, ми такође треба да пошаљете уз вредност која је унутар постојећег оквира за текст. Сада знамо шта треба да питате Финанце Иахоо! за, па ево је функција да желимо да изврши када је захтев заврши. Ми немамо плугин да направи списак за нас, па ево где смо заправо идемо да се изгради листу предлога. Да бисте то урадили, много волим у ПХП смо спојени ове велике конце ХТМЛ онда их штампа, можемо урадити исту ствар тачно у ЈаваСцрипт. Прво ћемо почети са ове ниске зове сугестије, и ово је само стринг ће да садржи неке ХТМЛ. Желимо да то буде списак ствари, па ћемо кренути са ове листе таг, и сада ћемо прелазили преко свих симбола који су враћени назад у нас. Запамтите, јер смо рекли дататипе: 'ЈСОН', ово није ниска. Ово је већ низ за нас. То је стварно кул. Ми једноставно не може рећи: "Ја желим да додате елемент листе." Ми ћемо га ставити унутар једног елемента у делу који, ћемо му дати класу сугестија тако да знамо шта је то, и сада овде је симбол који смо се вратили из Иахоо! финансија. 

Када смо направили елемент за сваки од симбола смо поново оствариле, Ми само желимо да се затворе листе. Дакле, сада сугестије представља ову малу ХТМЛ фрагмент да када стави на страници ће бити списак ствари које тражимо. Сада идемо у ствари ставимо на страну. Да бисте то урадили да сам заправо сам створио нови празан див а ја сам јој дао ИД предлоге. Слично смо поставили садржај див који би приказали цена на берзи података, ми смо тек сада желите да поставите садржај овог дива на било ово стринг која садржи ове симболе. Користећи овај ХТМЛ метод, ово сугестије променљива, овај стринг је низ ХТМЛ. Хоћу да узмеш тај ХТМЛ и ставио га унутар див зове сугестије. Управо смо додаје нешто ДОМ сада. Додали смо неке нове елементе у Дом сада можемо приказати на страници. Хајде да видимо шта ово личи. Ако се учитати у куоте6 и сада се вратимо, сада када почнем да куцате ААПЛ, више не морамо да боотстрап АутоЦомплете, али ми сада имамо овај списак који смо сами направили. Ово је мало ружније него боотстрап Типеахеад, на пример, али то не дозвољава нам да урадимо још једну ствар. Када смо гледали тај боотстрап плугин, видели смо да када смо аутоцомплетед, један од аутоцомплете вредности била Аапл. То можда неће бити толико помоћи. Као корисник, ја не могу одмах препознати све залиха симбола. Оно што сам вероватно више вероватно да призна су те компаније стварни имена. Дакле, не би било заиста корисно ако уместо рекавши ААПЛ ово је нешто као Аппле Инц Зато смо ваљани ово себе, можемо врло лако да урадим. Хајде да отворимо нашу последњу датотеку куоте овде, тако куоте7. 

Иста ствар. Управо сам створио још једну ПХП фајл који ће се вратити са нама више од симбола. Такође ће нам вратити имена компаније. И тако радимо исту ствар. Ми прављење АЈАКС захтев. Када је захтев завршен, ми ћемо овде изврши ову функцију, и ова функција ће да се изгради велики низ елемената. Али разлика је у томе што је вредност ових спискова није више само симбол, Сада је име. Дакле, имамо један мали проблем. Када користимо нашу проналажење, морамо некако да га прође симбол. Ми не можемо проћи проналажење нешто Мицрософт Цорпоратион. Морамо да прође га МСФТ. Када пишемо ХТМЛ, имамо пуно лепих уграђених атрибута. Можда повезан са њим хреф или класа. Али оно што је заиста потребно сада је за сваки од ових линкова да имају симбол берзе у вези са њом. Нема уграђене у ХТМЛ атрибута за симбол акције, али срећом, ХТМЛ5 омогућава нам да створимо сопствене атрибуте да буде шта год желимо. Говорећи података симбол, ја сам представио нови атрибут чије име сам измислио, и то је у реду, јер сам га предговор са овим подацима. Ми ћемо чувати унутар тамо симбола из лагеру сада. Шта то значи да иако смо приказујући вредност назива компаније унутар наше аутоцомплете, ми још увек памти симбол која је повезана са сваком предузећу. Начин радимо да је унутар самог тог елемента. Значи морамо да направимо још једну промену. Када смо га кликните сада, морамо да заиста искористе симбола атрибута него само његова вредност. Ако се вратимо, ми приложили хендлер догађаја за предлоге. Кад год неко од ових предлога је сада кликне, желим да урадим нешто. Оно што желим да урадите је да промените вредност тог поље за унос. Сада желим да подесите ову исту функцију Вал. 

Дакле, без икаквих аргумената овај вал функција даје вам оно што је већ у текст, али ако се дају ниску, то ће узети ту жицу и ставио га у поље. Ја сам свој избор оквир за текст на исти начин. То име је симбол унутар форме цитат. Сада сам га шаље вредност атрибута података симбола. Ова ствар је овде ново, ово $ (тхис). Шта се ово односи на јесте елемент који је кликнуо. Овде можемо видети да нисмо прикључивање клик догађај сваком елементу са класе предлог појединачно. Уместо тога, ми приближавамо ово мало другачије. Уместо што говоримо кад нешто унутар ове предлоге див, што запамтите само контејнер за ту листу, ако се нешто унутар тог див се кликне и има класу сугестију, Желим да овај догађај на ватру. У суштини шта то значи да можемо да урадимо је да можемо поново исту руковаоца догађајем за све ствари на листи. Дакле, ми не треба да имамо један руковалац догађајем за први елемент и другачији догађај руковалац за други елемент. Ми већ можемо рећи: "Ја желим исто догађај руковалац да се примењују на све на мом списку." Али морамо некако да знате који елемент је кликнуло. Овај "ово" кључна реч представља управо то. То је објекат који је управо кликне корисник. Ако сам кликнуо на 3. везу, ово представља елемент тог 3. линка, што значи да могу да добијем свој атрибут, података симбол, што знамо је да садржи симбол који је повезан са фирмом само сам кликнуо. Ако се вратите на нашу страницу финансија, видимо сада да сам једном почнете да куцате нешто слично МСФТ, ми више не добија само Акционарског симболе, ми смо сада све стварне компаније. Али када кликнем на један од ових компанија, можемо да видимо да у ствари нисте попуњавање оквир за текст са именом фирме али шта год да је складиште унутар тих података атрибута. И тако, ако сам заправо контролише један од ових елемената десним кликом га и кликнете прегледајте елемент, ми заправо можемо видети шта ово личи. 

Запамтите ово је нешто што смо унутра створили од тога за петље када смо градећи ту ниску ХТМЛ. Овде се види да је овај податак-симбол има вредност МСФТ, што је сјајно. То је оно што смо очекивали. То је симбол и тако смо добили вредност која нам је потребно да користите унутар овог оквира за текст. То је довољно за куоте облику јер је то некако досадно. Хајде само да неке брзе побољшања нашег портфолија страну. Ако сте користили ЦС50 финансије за време и почнете куповине и продаје много акција, на крају ова табела ће добити прилично велики, и ти ћеш желети деоница, наравно. Једном сто је стварно велика, то би могло да буде корисно за корисника да покуша да тражи преко њега. Унутар поља за претрагу, ако почнем да куцате нешто слично Дизни и потрази за мој Мики Маус лагеру, можемо видети да је сто се сада филтрирања на основу онога што сам унесе Ова функционалност изгледа супер компликовано, али то је заиста, заиста лако са јКуери и ЈаваСцрипт. Ово портфолио.пхп фајл садржи ЈаваСцрипт фајл који се зове портфолио.јс. Хајде да погледамо то. Дакле хтмл, јс, портфолио. Ево где радимо да тражи на столу. Прва ствар коју треба да урадите је да прикључите руковалац догађајем тог текст јер знамо да желимо наш филтрирање функције на ватру сваки пут корисник притисне нешто зато што ми немамо времена за претрагу дугмад. Прва ствар коју треба да урадите је да схвати шта корисници траже, баш као што смо раније радили. Ова кључна реч се односи на текући елемент корисник интеракцији са. 

Пошто корисник у интеракцији са поља за претрагу, $ То представља поље за претрагу, па тхис.вал нам даје оно што је унутар поља за претрагу корисник је тренутно куцањем. Дакле, сада оно што желите да урадите је да желимо прелазили преко свих редова унутар нашег стола. Да бисте изабрали све редове у нашој табели, дао сам ту табелу је ИД табеле портфолија, и сваки ред је представљена ТР елемент, тако да селектор ће да се врати на мени велика низа свих редова у мом столу. Сада желим да прелазили преко тог низа. Могао бих ти за петљу, али јКуери заправо нам даје леп функцију која се зове "свако". Оно што свако ради је сваки има један аргумент, а тај аргумент је функција. Шта ће то урадите је да ће применити ову функцију сваком елементу унутар ове листе. Ова функција узима један аргумент који је е, и када је ова функција извршава, ова е ће бити замењен са првом реду, онда други ред, а затим и трећи ред. На овај начин, то је иста ствар као и ради за петљу и онда фигуринг тренутни елемент на основу индекса унутрашњости вашег за петљу. На сваком итерације, за сваки од ових елемената у табели, Желим да проверим да ли текст елемента - текст ћелије унутар реда - одговара оно што тражим. Овај велики дуг низ команди је како сам могао да урадим. Прво, опет, ово сада односи - јер је унутар нову функцију - ово је сада тренутни ред у табели. Желим да тренутни ред у табели, и ја желим да се све њене деце. Запамтите, ДОМ је хијерархијски дрво, што значи да су елементи имају велики број деце. 

Ова деца функција. Ће да се врати да ми врати низ свих елемената да су деца, у овом случају, ред у табели. То је једноставно ћелије унутар реда. Ја само желим да претражују прву ћелију. Ова прва функција. Каже да ми је први елемент у том низу. Тада текст функција каже да ме тачно шта је унутар те ћелије пошто желим да претражују преко тог текста. Коначно, хајде да конвертује мала слова, тако да можемо да урадимо текстуалне усензитивитету упита. На крају, желимо да видимо да ли је ниска унутар табеле садржи низ смо тражили. Тхе индекОф функција у ЈаваСцрипту не само то. То нам говори да ли или не овај стринг садржи још једну жицу. Ако је истина да ћелија садржи оно што тражим, онда желим да се уверите да је то приказано. Емисија метод ће рећи: "Покажи елемент." Ако ово није случај, онда то значи да шта год ја тражим није садржан у оквиру тог реда, па желим да се сакрију је од корисника. То се постиже тај леп ефекат филтрирања, где више не видимо целу табелу. Уколико сте заинтересовани за то како да овај идентификатор као и, ћемо писати онлајн извор. Али то је врло једноставно. ЈКуери има страшан методе за ове анимације и манипулишући ЦСС својства. Дакле, то је то за мене. 

Шта је онда чека? Као што ћете видети у само неколико дана, коначни предлог пројекта се очекује. Коначна пројекти Предлог ће вам поставим неколико питања, али међу њима ће бити три прекретнице - један "добар" прекретница, један бољи прекретница, а један најбољи. Идеја је заправо да помогне момци поставили ваша очекивања тако да минимално ћете бити задовољни са учинком од вашег коначног пројекта и то ће бити "добар" колико сте забринути. Али онда у интересу добијања вас до само мало нешто боље или нешто најбоље, такође ћемо некако гурати вас ка да је добро. Тхе ЦС50 Хацк-ог-међувремену, у неколико недеља. Обично смо то урадили на основу лутрије основа због интереса, али шансе су ми ћемо узети неколико стотина нас шатл аутобусима из Харвард тргу до Кендал тргу на коме Мицрософт има лепу објекат пригодно назван "НЕРД" - Њу Ингланд Истраживачко развојни центар. Ми ћемо тамо око 8 часова ћемо имати неку храну. Око 1 часова ћемо имати мало више хране. Око 5 часова, ако сте још увек будни ћемо преко главе да ИХОП или да вас вратим на кампусу. Циљ је да зароне у финалне пројекте поред ученика и особља. Затим је неколико дана касније је ЦС50 сајам, што је заиста требало да буде прилика за вас момци да покажу свој рад и достигнућа за семестра док трљање рамена једни са другима и добијање смисао онога што сви урадили. Уз то је рекао, многи захваљујући Томијем и Јосипу и ми ћемо вас видети у понедељак.  [Аплауз]