[Powered by Google Translate] [Седмица 9 Продължава] [Дейвид Дж. Малан - Харвардския университет [Това е CS50. - CS50.TV] 

Това е CS50. Това е края на седмица 9. Благодаря Ви много. Най-накрая. Седмица 9. Аз го имам. Днес ние продължаваме разговора ни за уеб програмиране с едно око към окончателния проект не, защото трябва да се направи нещо, уеб-базирана за крайните проекти, но защото така или за крайните проекти или след CS50 това е посоката, в която съвременен софтуер ще. И все пак не е лесно нещо. В действителност, един от най-трудните неща за вършене е аспект на дизайна. 

Например по дизайн означава всъщност да потребителския интерфейс или потребителски опит. Смея да кажа - и ние знаем от скорошно проблем , когато някои от вас се излъчва своите забележки за някаква част от софтуера или хардуер, който ви вбесява, независимо дали на територията на колежа или изключите има много сайтове там, има много хардуер там, този вид е гадно. Но реалността е, че правенето на неща, които са лесни за употреба, но все пак са силни е много трудно предизвикателство. Така че за днес попитах Йосиф и Томи се присъедините към мен тук , така че ние можем да имаме разговор, както за дизайн и какви на мисловните процеси трябва да започне през главата ви , когато проектирате вашите крайни проекти, вашите бъдещи начинания. И след това с помощта на Томи ние ще разгледаме някои от подробностите по изпълнението. Как може да имат някаква визия за хартия или в ума си , че ще можете да извършвате програмно с помощта на някои от технологиите и техниките, ние току-що започна да говори за а именно JavaScript и нещо още по-нова, а именно AJAX, Asynchronous JavaScript. Това ви позволява да създадете по-динамичен потребителски интерфейс привлекателен постепенно все повече и повече данни от сървъра. Така че ще видим някои от тези откъси, както и днес. Като настрана, ако се интересувате от концентрира в областта на компютърните науки или minoring по компютърни науки, знам, че този петък по обяд Максуел Дворкин 221 ще има събитие пица където можете да научите малко повече за компютърни науки. По пътя си към вратата днес ще бъде в състояние да взема неофициално ръководство за CS в Харвард. Ние ще го постави на кофите за боклук извън височината на кръста така че, ако искате да вземете и да научат малко повече за CS, че ще бъде там за вас, тъй като е в седмици 0. Също така, ако искате да се присъедините към нас за CS50 обяд този петък в 13:15, главата да cs50.net/lunch. Без повече приказки, аз ви давам учение колега Джоузеф Ong. Здравейте. [Аплодисменти] Благодаря. Пръв път научих за дизайн в един клас, наречен CS179. 

Професорът по това време ни разказа историята за друг професор който беше отишъл в хотел и използва кран. Може ли някой да ми каже какви са две копчета на ляво и дясно? [Ученик] топло и студено. >> Топла и студена. Добре. Това, което обикновено се очаква, нали? Този професор, след като с помощта на кран иска да вземе душ, а той продължава да използвате тази. Той смята, че лявата и дясната страна са за топло и студено, нали? Но може ли някой да ми каже какво точно ще правя? Всички ръце? [Чува отговор студент] >> Едно от предположенията е? [Чува отговор студент] >> температура? Така че една от тях контролира температурата и други контроли? >> [Ученик] водно налягане. Налягането на водата. Добре. Това професор влезе в тази и мислят, че са контролиране на топла и студена, превръща правото, което той мисли, че е горещо, по целия път до защото той иска да вземете топъл душ. Е, това не ми мач, така че той получава това не е много забавно преживяване в един студен душ, и ние всички знаем какво се чувства като. Това е пример за дизайн недостатък. Какво искам да кажа от това е очакването му от чешмата не съответства на това, което излезе от банята, което е жалко за него. Така че това е пример за недостатък, който се случва в реалния живот. Но ние виждаме, както и всякакви други такива. Вероятно не сте фенове на системата MBTA. Това е системата на метрото всъщност в Лондон, който казва: "Този бутон не е в употреба." Защо тя е още там? Защо ни пука? Когато бях дете, технологии разбирам в къщата, когато компютърът щеше да катастрофира, майка ми ще дойде при мен, ми показва този екран и ме пита какво се е случило. 

Дори и аз не знам какво означава това. [Смях] Какво? [Смях] Понякога ние се чувстваме като разработчиците на софтуер са само за тралене нас. Като потребители ние сме като "Какво става? Някой ни каже." Това всичко се свежда до въпрос на проектиране. Проектиране, както можем да видим, не е само за естетиката, това не е за това, как изглеждат нещата. Тук виждаме, че това малко поп-нагоре тук всъщност изглежда доста добре. Той има сянка във фонов режим, има гранични радиуси, които се случват. Това е вид на доста. Това не е много добре проектирана, защото не е много удобен за потребителя. Това малко поп-нагоре, който идва наистина не ми даде информация за това какво се случва, не ми каже нещо като потребител за това, как да се възстанови от тази грешка. Искам да мисля за неща, че дизайнът не е. Първо, тя не е естетика. Той също така не е пълнеж ап с тон на ненужни функционалност. Ако сте тайландски ресторант, най-вероятно не искате да стане зъболекар в същото време. И с въпроси на Facebook не, че много хора го използват и това наистина не е в основата на това, което те са строили. И така, това е хубаво да се мисли не за толкова много количеството на нещата че сте пускането на вашата кандидатура, но качеството и как сте прави, че потребителския опит по-добре от подобряване на това, което вече имате. 

С две думи, дизайн ни казва какво трябва да се изгради. Например, ако ние строим нещо, нека търси нещата, като Google, например, трябва да правим нещата по начин, който изисква потребителят да предприеме множество кликвания, за да стигнем до това, което те искат, или трябва да го направим по начин, например с Google Instant или автоматично довършване което ни позволява да стигнем до нашите резултати по-бързо? Инженеринг включва, като Томи ще ви покажа, всъщност изграждането. Има много видове дизайн. Например, ако сте изграждане на нещо, за да разположи нещо в страна от Третия свят, където няма много електричество или че много технология, трябва да се проектира това, което строим по начин, който лесно се дава достъп на хората там. Но какви на други дизайнерски решения може да има или може да е замесен в подобно нещо? Да. Виждам ръка. [Чува отговор студент] >> десния. Точно така. Достъпността е едно нещо. Много хора не мислят за "Какво ще кажете за потребителите ми?" като крайностите на всяка от спектъра. Имам потребители, които биха могли да имат увреждания, които не мисля за и аз съм само при мисълта за проектиране за общия потребител. Интернет е достъпен от всеки в днешно време, и аз трябва да се проектиране за тези хора, както добре. Какви други дизайнерски решения може да ви направи? Да. >> [Ученик] Разходите COST. Много добре. Друго нещо, което можем да основаваме нашите дизайнерски решения са икономически. Ако сме на бизнес, искате да се изгради нещо, което не отнема много разходи за производство но могат да продават на особено висока цена или да ни някаква печалба. 

Това са всички различни видове дизайн, но когато ние строим нещо в интернет или когато ние строим нещо, което вероятно не струва толкова много да изградят сега, като интернет приложения - не е нужно да се хвърлят много капитал в нея за да се направи нещо, което наистина работи - какво ние сме по-загрижени за потребителския опит. Ние наричаме този потребител ориентиран дизайн. Същество какви потребителски ориентиран дизайн включва себе си в обувките на вашите потребители. Ако някой признаци за това, което аз съм изграждането, те очевидно специално моята кандидатура с цел в ума, със задача те искат да завършат. И вашата работа е не само да им помогне да завършат тази задача но и да им помогне да завършат тази задача по начин, който е ефективен, интуитивен, и, както каза един човек там, достъпни. Какво ефективност? Ефективност означава, колко бързо ми потребител изпълни задачата ми интерфейс. Ли много кликвания, за да получите от едно място на друго? Досаден? Имат ли те да изпълняват много повтарящи се задачи? Ние искаме да направим този процес възможно най-ефективно така че не е нужно да правите такива неща. Що се отнася до интуитивността, че, например, ако потребителят търси ми интерфейс, е лесно за тях да получите от място на място? Лесно ли е за тях, за да разбера какво трябва да кликнете в моя интерфейс за да могат те да се постигне целта или задача, която искат да постигнат? 

И накрая, както каза един човек там, достъпност е много важно. [Мъж говорител] Става дума за достъпност за неща като визия, Харесва ми как мога да проектира нещо за някой, който е сляп? О. За хората, които не могат да видят изобщо, ние имаме нещо, наречено екранни четци. Какво трябва да направите, е, че трябва да изгради своя уеб сайт по начин, че, например, конкретни технологии, това, което ние наричаме - Има много неща сега. Мисля, че има екранни четци, наречени JAWS. Много от тези неща разчитат на това, което ние наричаме площ правила с цел да се прочете на потребителя това, което се намира на страницата. За тези хора, които не могат да видят, трябва да се уверите, че тези екранни четци всъщност може да вземете съдържанието на страницата и може действително да се покаже на потребителите си, ако не можете да видите, поне все още може да се разбере съдържанието на страницата. Да. Добре. Достатъчно говори за добър дизайн. Да се ​​говори за лош дизайн. Това са неща, които не трябва да правите. Може ли някой да ми разкаже за опита си с Craigslist и това, което мисля, не е толкова голяма за този дизайн? Да. >> [Ученик] Мисля, че има твърде много думи в една област. Твърде много думи, нали? Напълно поразителен. Дойдете на тази страница и сте посрещнати с цял куп неща тук че не може дори да има значение за вас. Например, вие живеете в една държава, която не започва с тази буква. Да речем, че живеем в Тексас или нещо. 

Вие трябва да преминете целия път надолу на страницата, за да стигнем до мястото, в което са изложени. Аз съм от Бостън, така че нека да ме погледне в Масачузетс. Къде е Масачузетс? О, това е точно тук. О, това е Бостън. Добре. Нека да погледнем в Бостън. [Смях] Доста огромна, нали? Неудобни неща там. [Смях] Да кажем, че търся някъде да живеят. Колко хора са реално използвани Craigslist? Тона от вас. Има доста лоши начини да погледнат на това, но нека да разгледаме този. Каква е разликата между IMG и снимка? Може ли някой да ми каже? Има всъщност няма разлика. Те не означават точно едно и също нещо, но те имат различни етикети за тях по някаква причина. Ако кликнете върху Има Image, нищо не се случва на страницата. Аз всъщност трябва да щракнете върху Търсене нещо да се случи отново. Какво може да бъде по-добър дизайн решение, което може да се направи там? Ако аз съм кликнете върху този филтър, вероятно искате да филтрирате от това конкретно действие или че определена категория. Така че, вместо да се налага да натискате Търси отново, бих могъл просто автоматично филтриране вид стил на Google, където го правят незабавно. Малан Но не се формира като сме ги виждали до този момент трябва да бъде физически представен като натиснете Enter най-малко или натискане на бутон? Както сте ги виждали досега, всъщност трябва да щракнете върху Изпращане, за да направи тези неща. 

Но Томи ще ви покажа в друга, всъщност има начини, за да такава, че когато щракнете върху това нещо може да изпраща автоматично това, което ние наричаме искане AJAX и да получите данни за минали периоди и да филтрирате резултатите мигновено. Има тон на неща, които са наред с този интерфейс. [Малан] Може да търсите за Кеймбридж? Има нещо леко неправилно тук, където ви е грижа за Кеймбридж и все пак сте се Westford, Spring Hill, West Newton и други подобни. Вероятно не е идеален. >> Вероятно не е идеален. Как може да бъде в състояние да направи опит на потребителя по-добре на тази страница? Да. >> Студент инструкции. Добре. Инструкции в какъв смисъл? [Ученик] Например, нещо, което за първи път потребителите, които дори не знаят какво е Craigslist или вие не знаете какво трябва да направя. Точно така. Така обяснява какво Craigslist е на тази страница е важна. Ние всъщност може да каже на потребителите какво тази страница е всъщност. Ако аз съм просто посетите това, виждам цял куп места. Аз дори не знам какво означават те. Но по-важното е, просто гледам на този интерфейс, Спомням си, че трябваше да превъртите надолу тон на неща, за да намерите конкретна общност , че аз всъщност се грижи относно това. Какво е по-бърз начин мога да го направя? Да. [Студент ги разделят в Изток, регионите west. >> Добре. Мога да ги разделя на повече категории, които биха могли да ми помогнат по-бързо определяне как да стигнем до това конкретно място. [Ученик] Поставете падащия списък. >> Точно така. Добре. Бих могъл да използвам падащото меню, защото имаме определен набор от неща, и можехме да ги показват в падащото меню. По този начин не заемат толкова много място на екрана. Но дори по-добре от това, какво можем да направим? Да. >> Чува студент отговор] >> Може ли да се каже, че отново? >> [Ученик] полето за търсене. Да, полето за търсене. Това е страхотно. Какво всъщност можем да направим е, ако погледнем назад към пързалки, полето за търсене. Автодовършване. Много лесен начин да се търси чрез резултатите, които знаете, че са в комплект. Ако започнете да пишете БО, просто ми покаже резултатите, които имат БО вътре в тях. По този начин много лесно може да намерите специално искам да отида вместо да се налага да преминете през този наистина голям списък. 

Това са всички видове наистина ниско окачване плодове, че някой, който е прилагането на Craigslist всъщност може да направите, за да се направи опит на уеб сайт много по-добре за техния потребител. Добре. Стига приказки за лошите сайтове. Нека поговорим за Facebook. Когато Facebook излезе, и по-специално Facebook снимки, имаше много други услуги на времето, което може да направи точно едни и същи неща. Те биха могли да организирате снимките си в албуми. Какво можете да направите, е да можете да ги организирате в комплекта, както и. Можете да ги организира по дата. Можете да направите всички тези конкретни неща. Но знае ли някой какво прави Facebook снимки взривят по това време тя е била освободена? Да. >> [Студентски] маркери. >> Маркери. Точно така. Имаме Мило тук, който е нашето куче талисман с тази кърпа CS50. Можете да видите, че имаме този маркиране черта по средата. И това, което прави Facebook снимки толкова интересна от гледна точка на използваемостта е, че тя всъщност позволи на хора чрез това да включат своите приятели в снимките си. За Facebook, тъй като сайта им е особено социалната, това е за изграждане на този вид социална атмосфера. Това подобрява опита на снимки много повече защото те в действителност може да започне казвайки: "Това са връзките между хората, и това са снимки за хората, които се грижат за ". Част от него е и вид нарцисизъм. Хората обичат да се маркира в снимки и такива неща. Въпреки, че не е непременно добра човешка черта, в същото време то е на базата на добрите дизайнерски решения защото хората всъщност е грижа за неща като това. Така че това е Facebook снимки. 

Но нека поговорим Facebook-общо. Сигурен съм, че много хора тук имат мнение за Facebook, добри дизайнерски решения, така и лоши дизайнерски решения. Така че нека да излеят или да бъде щастлив. Хайде де. Знам, че всички от вас използват Facebook. Някой трябва да има нещо лошо да каже или нещо хубаво да кажа за него. Да. [Студент в емисия новини има много неща, които не ми пука за. Емисия новини показва много неща, които не могат да се грижат за. Имате приятели в Facebook, които не са изпълнени за 2 или 3 години и ще видите техните резултати от новините се пръкват в емисия новини и не ми пука за него. Facebook е действително направени усилия, за да направи това по-добре, и те всъщност се опитва да прокара съответните резултати на върха на емисия новини като на края така че всъщност виждаме нещата от приятели, които са от значение за вас или вашите близки приятели. Нещо друго? Да. [Чува отговор студент] >> Може ли да се каже, че отново? [Ученик] Рекламите са сравнително ненатрапчив. >> В какъв смисъл? [Чува отговор студент Те нямат светлина върху екрана, като банери. Добре. Това е добре. Ако си спомняте, в интернет от 90-те години - >> Малан] аз бях там. >> Той беше там. [Смях] Може би си спомняте мигащи произход GIF файлове, блестящи неща, GeoCities стил вид на нещата. Това наистина не е пример за добър дизайн защото това е наистина отвлича вниманието от съдържанието. Изкуство в Йейл уебсайт използва за анимирани GIF файлове, като техния произход и не може да прочете нещо на страницата, но предполагам, че някой всъщност говорих с тях и сега е малко по-различно. Малан Това е много по-добре сега. >> Това е много по-добре сега, както можете да видите. >> Малан] О, да. Просто страхотно, просто - Да. Добре. 

Част от него е и страницата си вероятно много минималистичен и много разбираем така че нещата на страницата поток по начин, който е много логично и не по начина, по една от друга. Какви други неща са добри за Facebook или лошо за Facebook? Нека просто да разговаряте дизайн тук. О. Къде? Да. [Ученик] Новата система Timeline ви позволява да търсите на лицето за миналото си. О, Timeline. Timeline е голямо нещо, тъй като ви позволява да дебнат твоите приятели , когато са били в гимназията. Timeline е добре, защото това ви позволява да филтрирате на съдържание много по-бързо, тя ви позволява да намерите неща, че биха ви взели много дълго време да се намери просто превъртане и надолу, нагоре, нагоре, нагоре, нагоре, нагоре, като връщане назад във времето. Но пък има и нещо един недостатък, че по отношение на потребителския опит. Какво може да бъде това? Big дума, която започва с P-R. >> Студент поверителност. >> Поверителност, нали? Поверителността е огромен проблем за потребителския опит. Това е едно от нещата, които мразя най-много за Facebook. [Смях] [Малан] Както правя сега. Давид не знаех, че това действително се е случило до вчера. Така че сега той знае, че всеки път, когато го говорите Знам, че той ми обръща внимание. [Малан] неловко част бях действително да му обръща внимание, и аз не знаех, че той знаеше, че го игнорира. [Смях] Поверителността е огромен проблем. Може ли някой да ми каже какво може да е лошо за поверителност на Facebook като оставим настрана факта, че те правят нещата по този начин? Какво е особено трудно да се направи по отношение на Facebook неприкосновеността на личния живот? Този вид е един от водещите въпрос. Да. >> Студент Скриване на вашите снимки от определени хора. Точно така. Точно така, да скриете вашите снимки от определени хора. Те имат този малък, малък бутон в горния десен ъгъл, който ви позволява да превключвате неприкосновеността на личния живот на снимката. Личния им живот са много разнообразни между различните видове менюта. 

Те са придобили много по-добре за него наскоро, но той да бъде използван в случай че всеки път, когато искат да попречат на приятелите си да видят на снимки, вие ще трябва да мине през много сложен 5-стъпка процес е като, нека кликнете върху тази връзка, сега нека щракнете отново, позволете ми да щракнете отново, нека ми посочете кои хора не могат да видят моите снимки. Това не е особено добра от страна на Facebook защото толкова много за потребителското изживяване всъщност им дава свободата да контролира това, което хората могат да видят. Ние наричаме този потребител контрол и свобода. Ако не сте отдаване под наем на потребителите си направите това по начин, който е ефективен и интуитивен, тогава вашето потребителско опит не е чак толкова голям на всички.  Бихте момчета искал да кажа нищо за Facebook? Как мога да изключите тази функция? Ong Вие не можете да изключите тази функция, и това е огромен недостатък използваемост от страна на Facebook. Тази функция - всъщност изглеждаше вчера в него - това е, че не можете да го направите или да е погребан някъде много, много дълбоко в дебрите на Facebook, защото аз не мога да разбера как да изключите тази функционалност. [Малан Но понякога тези решения не са очевидни защото вие момчета ни дадоха много полезна обратна информация на различни CS50 приложения и уебсайтове, които разбира се използва. Ние не са приложили всички тези искания и предложения. 

Част от това е за получаване на толкова много искания, че това е функция на времето, но понякога просто направи съзнателно решение като "Благодаря ви за предложението, но не сме съгласни." Е, как да действително да реши какво трябва да направите ако вашите потребители, че трябва да направим нещо дори и да не е задължително? Това е фин баланс между действително слушане на това, което потребителите си казват и всъщност като някаква линия, където вие казвате, "Ние няма да направи това, което казват тези потребители." И по-специално, мисля, че е цитат от Хенри Форд, който обобщава това доста добре. "Ако бях помолен хората това, което те искаха, те щяха да казват, че искат бързи коне". Може ли някой да сортирате дразни освен какво всъщност означава този цитат? Това не е точно, че потребителите знаят какво искат, но това е повече, че - [Ученик] Те не знаят какво е възможно. В част те не знаят какво е възможно. Tease, че освен малко повече. Какво искаш да кажеш с това? [Чува студент отговор] Това е добре. Мисля, че се опитвам да кажа, е, че хората знаят какво искат. Те искат бързи коне. Това, което те наистина искат, е способността да се движат по-бързо, но те наистина не знаят среда, чрез който да се постигне това. Когато стигнете до потребителите си и вашите потребители да ви кажа нещо и те ви кажа, "Искаме тези функции и тези функции и тези функции", не искате непременно да се мисли за "Нека да вървим напред "И прилагат това, което те изрично казват" но това, което искате да си помисля, "Какъв вид на идеи мога да получа от това?" Какво всъщност искаш? 

И от там какво можете да направите, е да проектира нещо, което отговаря на тези искания , но не непременно в начина, по който потребителят очаква тя да бъде изпълнено. Така че за нещо подобно крайните проекти, в много реално изражение, какво е полезно евристичен когато става дума за нещо по-добро, особено ако проектантът има тази арогантност за него , чрез която можете вид знам какво е най-добре, може да отнеме вход от вашите потребители, но как да отида за получаване на тази обратна връзка? В окончателния проекти, много конкретно, което произвежда оптимални резултати тук? Какво произвежда оптимални резултати - и аз ще отида в секунда - е този процес на разработване и след тестването и след това итерации. Какво искам да кажа чрез тестване обикновено е, когато проектирате нещо мисля, че е доста добра, като "Аз съм такъв велик дизайнер. Всеки ще обичам този." А после го сложи там и хората наистина не го харесва по някаква причина. Това, което трябва да направите, е, че трябва да се вземат части от неща, които хората обичат и реконструкция неща, които хората не харесват. Това звучи като много очевидно процес, но този процес на постоянно итерации на върха на това, което вече сте построен е процес, който ви помага не само усъвършенства собствените си умения за проектиране, но също така ви помага да усъвършенства дизайна така че хората, които всъщност Благодарим Ви за продукт, дори повече, отколкото преди. 

Аз ще отида в продължение на повече конкретни примери за това какво може да се прави. Като вид Последният пример за продукт, нека погледнем в каяк. Каяк, когато излезе, беше много, много популярна. Може ли някой да се досетите защо? Какви са най-различни неща ви харесват за това, ако сте го използвали или какво са различни неща, които не ви харесват? Да. >> Чува студент отговор] >> Добре. Това е част от него се дава възможността на потребителя заявка, която е по-просторен от много рестриктивен като: "Вие трябва да изберете начална дата "И че трябва да вземем крайната дата." В действителност, това ви дава възможност да бъдат гъвкави за него и той ви дава всички полети в този диапазон. Нещо друго? [Ученик] Те включват таксите в цената. Те се включват таксите в цената. Данъци и нещата действително отиват директно в тази цена в горния ляв ъгъл така че не сте подмамени да мислят, че сте в действителност плащат за $ 240 полета когато това е наистина $ 330. Нещо друго? Да. [Чува студент отговор] Аз не съм сигурен, ако те действително ви позволи да направите това. Аз може и да греша. Това може да е нещо интересно, ако искате да сложите по-голяма тежест върху определени филтри така че те бута резултати, свързани с този филтър към върха. Но може ли някой да ми каже какво е толкова специално за този лявата страна? Откъде традиционно търсите полет на интернет услуга преди това? 

Да. >> Чува студент отговор] >> Може ли да се каже, че [Ученик] Всяка авиокомпания. >> Да. Всяка авиокомпания има своя собствена интернет страница. Това консолидира неща. И? [Ученик] знам точно по кое време си тръгваш. Знаеш ли точно по кое време си тръгваш, но са свързани на филтри в частност. Остави ме да извадя на каяк. О, Боже, изскачащи прозорци. Bad потребителски опит. Какво се случва, когато се движа този плъзгач? [Студентски] Автоматични актуализации. >> Ong] Автоматичните актуализации. Това е нещо, което е много важно. Преди това, когато искаш да търсите полет, трябваше да се сложи във вашия вход местоположение, местоположение за изход, натиснете Търсене, че ще обработим, че и да се покаже резултатите си. Ако искате да промените вашата заявка, ще трябва да натиснете два пъти, влиза в нова заявка от нулата, а след това го направи отново и отново. Най-хубавото нещо подобно е използва много неразбираеми] нещо по средата. Всеки път, когато правя нещо подобно, го изстрелва искане и той ви връща всички резултати веднага. Този вид незабавна обратна връзка е нещо, което каяк див народен защото това е наистина лесно за мен да променя заявка и да разбера нещата, които са около определен диапазон , без да се налага да се върнете назад и напред, назад и напред, назад и напред. Така че това са най-различни неща, които искате да си помисля, когато сте проектирането на вашия сайт. Как мога да направя, че е много ефективен за потребителите ми да мине през това, което те работят по и да стигнем до евентуалното им цел възможно най-бързо? [Малан И точка Йосиф рано за потребители, които не е задължително да знаят какво искат, въз основа на това, което вие вече знаете за HTML и имате отметки, радио бутони, изберете менюта, полета за въвеждане и други подобни, как ще се приложи идеята за бране на началния час на полет? 

Кои от тези различни механизми на потребителския интерфейс ще използвате? Ако просто знаят размера на HTML, който е учил преди и вие знаете, на входа са радио бутони, отметки, падащи менюта, и полето за въвеждане, какво ще са естествен избор за бране на дати? [Ученик] Входен. >> Вход. Или може би дори капка надолу с всички дати, нали? Така е и с по-сложни механизми за потребителския интерфейс като този от лявата страна, които можете да реализирате, може да направи този процес много по-интуитивен със слайдер защото времето е непрекъсната, а хората обикновено не мисля за него по отношение на отделни части. Добре. Последното нещо. Десет използваемост евристики. Всички неща, за които говорихме по-вероятно попадат в обхвата на една от тези категории. Ако отидете в тази връзка, която обектите ще бъдат публикувани онлайн, действително ще бъде в състояние да проектирате вашия сайт, да пазят тези евристики в ума и тези правила на палеца. За своите проекти, това, което аз предлагам да направите, за да проектират приложението си, по-добре е първо да направя прототипиране хартия. Когато мислиш за вашето приложение, много бързо скицира това, което искате да изглежда като и се уверете, че всички кутии са подредени по начин, който е много интуитивен за потребителя да използва и дори тези хартиени прототипи на приятелите си и започнете фокус групи. Просто се 2 или 3 души заедно и да ги помолите да само кликнете върху тези хартиени прототипи, и да им покажем новите екрани, за да види дали те действително да разберем какво се случва. 

Какво искате да направите, е да им даде задача, мотивира тази задача, и просто да ги даде на приложения и нека го използвате. Не им дават инструкции отвъд това. Вие искате да нека взаимодейства с приложението си, по начин, който ви позволява да видите как те ще го използвате, ако не стояха до тях. И това е много важно. Това ще ви даде много прозрения са хората, които получават около конкретни неща по такъв начин, че не възнамеряват да? Те използват конкретни механизми за потребителския интерфейс на екрана по начин, който е вид хек? Нямах намерение, за да ги направи по този начин. И след като сте готови с това, какво искате да направя? Своя дизайн скали, нали? Какво искате да направите, е да искате да се развива и след това направете този процес отначало. Така че покажете на своите приятели, след като веднъж сте го развили, го тестват, разработка, тестване, разработване, тестване, обхождане, и и напред. Дизайнът е много повтарящ се процес, в този смисъл. Вие всъщност трябва да се изгради нещо и след това осъзнаваш нещата за него , че не знаех, че преди и се върна и да се подобри от това. Сега, както и за частта за развитие, това е, което Томи ще ви покажа след почивката и как може да сте в състояние да приложи нещо подобно Автодовършване по начин, който е доста проста. Малан] Както Томи създава тук, въпрос тогава. Много от най-ранните уеб сайтове и Иосиф, каза 1990 стил уебсайта, това е реализации, където, ако искаха да изберете времето за стартиране и времето да се сложи край, честно казано, през деня и дори на някои сайтове днес начин да направите това е да изберете един час от падащото да изберете минути от падащото меню може да изберете AM, PM, и след това да направите това още 3 пъти. И така с шест кликвания и може би някои превъртане вашето потребителско действително могат да предоставят някаква дата и / или период от време в този смисъл. 

Така че определено оптимално и все още до този момент не съм виждал изразителни възможности във всеки от езиците, след като видяхме да се направи по-секси нещо като този плъзгач на начален час и краен час. Но ако мислите, че обратно на седмица 0, когато говорихме за Scratch, там не е имало джаджи, които просто някои неща. Наистина ли само тези основи като контури и условия и други подобни. Така вид само като си помисля много абстрактно, независимо от данните на HTML, какво всъщност се случва с нещо като този начален час и краен час слайдер? Когато мога да си движа мишката и кликнете върху този малък символ морков в ляво и започнете да плъзгате, програмно, какво искате да бъде в състояние да изпълни това да се случи? Какви въпроси, какво булеви изрази искам да бъде в състояние да попитам? Какво всъщност се случва? Сами? [Ученик] Къде е позицията на курсора? >> Добре. Къде е позицията на курсора? Това е нещо, което трябва да изрази обратно в Scratch, дали тя се основава на място или дори цвят или нещо подобно. Може би си спомняте все така за кратко в понеделник имаше всички тези неща, наречен събития в света на уеб, така че има неща, като OnClick и onkeypress onkeyup и поставяне на показалеца и onmouseout. Така че осъзнават, че дори тези неща, които сме се отпуска в мрежата със сайтове като Facebook и Gmail, дори и да нямат представа как бихте евентуално изпълнение на това, защото няма нищо като дори в лекцията или проблем 7, Съзнавам, че с точно тези същите основи, с HTTP и параметри и GET и POST, с основните HTML входове, които сме гледали досега и в един момент с програмни механизми, че Томи е на път да въведе можете да започнете да изразиш себе си, точно както направи през седмица 0 от много интуитивно плъзгане и пускане. 

Така че с това каза, Томи MacWilliam и някои нови парчета пъзел за нас за уеб. Добре. Моето име е Томи, и аз отивам да се говори за JavaScript. Само отказ: Аз съм на мнение, че JavaScript е най-добрият език за програмиране в целия свят. Има много хора, които не са съгласни с мен, но това е просто невероятно. След като се върна в C, ако трябва да напишете C за друг клас или в някои други езици, това е просто наистина разочароващо във всички ниско ниво детайли, които трябва да получите затънал инча Така че, ако някога сте се чувствате тъжни за това колко е досадно C е да се напише, току-що се върна, пишат някои JavaScript. Това е нирвана. Ще се почувствате много по-добре за лош ден. Голяма част от магията на JavaScript идва от способността му да манипулира нещата , които са вече на страницата. Когато ние написахме нашите PHP скриптове, те са били екзекутирани на сървъра, и в крайна сметка, че PHP скрипт вероятно изведе някои HTML. Това HTML е изпратен на клиента, а след това това беше. Ако PHP искаше да добавите бутон към страница, например, не може да се направи това. Той ще трябва да направи изцяло нов HTML файл и изпраща към браузъра. С JavaScript ние знаем, че можем да актуализираме неща, а те са вече на страницата, и поради това ние можем да осигурим много по-незабавна обратна връзка, която наистина ще подобри потребителския опит на нашия уебсайт. Само един бърз рекапитулация на селектори JavaScript. Ние знаем, че при изтеглянето на HTML страница, , които ще бъдат представени в DOM. 

DOM запомните е, просто това голямо дърво, където елементи са свързани в този голям йерархия. Когато се работи с бази данни в pset 7, е едно от първите неща, които трябва да знаете как да се направи сверка с базите данни. Ние имаме тази голяма маса потребители, а понякога и ние просто искам да кажа, "Искам само някои от тези потребители, които съответстват на определени условия." По същия начин, когато имаме DOM трябва по някакъв начин от него заявки. Ние трябва по някакъв начин да се каже: "Искам всички бутони, които приличат на "Или всички изображения на страницата." И тези селектори ни позволи да направим това. Така че просто бърза рекапитулация. Това първо тук, това # представя, какво е, че ще изберете? Има ли някой помни? [Чува студент отговор] >> Да, точно така. Това се случва, за да изберете елемент на страницата, която има ID на представи. И така казва, че хеш таг селектора ще да работи с документи за самоличност. Какво ще кажете за втората. Центрирано, какво ще изберете? Да. >> [Ученик] Class. >> Точно така. Това сега е да изберете от класа. Разликата между ID и класа тук е като цяло ID трябва да е уникално в рамките на независимо пространство, което търсите. Така че, ако сте били търсят в продължение на цяла уеб страница, наистина трябва да има само 1 елемент, че някои ID, така че в този случай представят. С класа, от друга страна, ние може да има повече от един елемент на същата страница с един и същи клас. Това може да бъде полезно, за да кажа, че искате да изберете всичко, което е в центъра на страницата , а не само 1 нещо. 

И накрая, последната тук е малко по-сложно, Но какво е това да изберете от DOM? [Чува студент отговор] >> Какво е това? [Ученик] Всичко, което е етикет. >> Имаме две части тук. Във втората част се ще да кажа, че искате да изберете тези тагове с етикет на входа, така че всеки елемент, който е вход маркер. Но аз не искам просто да изберете всички входове защото нещо като бутон Submit може да бъде вход и нещо като текстово поле може да бъде вход. Така че с тези квадратни скоби искам да кажа Аз искам само да изберете тези елементи , които са от тип текст. Някъде в HTML тагове имам атрибут наречен тип, и стойността на този атрибут трябва да бъде текст. Е, как за тази първа част тук? Първата дума на този селектор е форма, тогава имам пространство и след това този вход част. Какво да направя, поставя пред него? Това се случва основно да ограничим нашата заявка. Тя може да бъде случай, че имаме някои входове на страницата , които не са потомци на форма. Какво ще направите, е това ще кажа, че искам само входните етикети, които имат някъде над тях някои родителски елемент на формуляр. И така, по този начин можем да направим тези по-йерархични запитвания така че ние не просто трябва да изберете всичко съвпадение даден селектор. Да ограничи обхвата на тази заявка към нещо друго. Така че сега ние знаем как да изберете елементи на страницата, нека да поговорим малко за AJAX. AJAX е все още много модерен акроним, който стои за Asynchronous JavaScript и XML. Просто така се случи, че XML е просто някакъв начин за представяне на данните. 

Този вид губи популярност напоследък, така че X в AJAX не се използва през цялото време. По принцип, това, което AJAX ни позволява да правим, е да HTTP заявки от контекста на JavaScript. Когато сме в нашата уеб браузър и ние сме навигация около страницата и щракнете върху връзката, браузъра ще направи, е да HTTP заявка какъвто и да е връзка кликнете. Но това не винаги е идеален, защото ако това е така, след като Дейвид казваше, ние винаги трябва да направят потребителите щракнете върху бутона Submit или щракнете върху връзката , за да се случи нещо, което ще включва HTTP заявка. Така че с AJAX можем да направим тези искания от името на JavaScript. Това означава, че всеки път, когато потребителят не взаимодейства със страницата или нещо се случи, ние всъщност може да направи програмна искане до друг файл PHP на нашия уебсайт или нещо друго и извличане на данни, че този файл изплюе. Нека да разгледаме един пример на AJAX. Това е нашата CS50 страница на финансите, с които се надяваме някои от нас са запознати. Ако се вгледаме в HTML на тази страница, ние виждаме, че сте добавили няколко неща, един от които съм дал тази форма ID. Казах ID = форма "цитат". Аз бях направил това само защото тя ще направи това малко по-лесно да изберете от DOM , тъй като аз може просто да направи много проста заявка. Това, което искам да направя тук, е, че искате да се определи някакъв проблем с CS50 финансите. Така че, ако отидем finance.cs50.net всеки път, когато искате да получите оферта, трябва да щракнете върху бутона Тази GET Цитат и че Вземи бутона Цитат после ме отведе до друг цяла страница. И ако искам още един цитат, трябва да натиснете бутона "Назад" и след това го въведете в Получите оферта, и натиснете бутона "Назад". Това наистина не е най-добрият потребителски опит. Кой наистина ще използвате сайта, ако това е, че бавно се цените на акциите? Така че това, което искаме да направим с AJAX е да премахнете тази стъпка ще отделна страница , за да видите резултатите. 

Това, което наистина сме само питам, е, че наистина малка цена, и точно това е наистина малък обем от данни. Така че няма нужда от мен, за да отидете на друга HTML страница, изтеглите цялата нова партида от HTML, може би изтеглите още няколко изображения, някои други файлове CSS само за да ти отговоря много прост въпрос колко струва този запас разходи. С AJAX можем да направим това е много по-лесно. Виждаме тук, че аз съм свързване в JavaScript файл, наречен quote.js. Нека всъщност отвори този файл. Не е там. Всички мои файлове, JavaScript ще бъде разположен в HTML така че уеб браузър достъп до него. Тогава ние имаме отделна директория тук за JavaScript, и сега тук е quote.js. В горната част на този файл, това казва тук, че искам да се изчака цялата страница да се зареждат , преди да се опитаме да направим нещо. Защо е необходимо? Оказва се, че следващото нещо, което ще направя тук е да започнете да търсите за елемент , който съвпада някои селектор. Ако това JavaScript е все изпълнени преди този елемент се зарежда на страницата, след всичко, което се опитвам да правя няма да работят защото аз отивам да се опитате да изберете нещо, което все още не е там. Така че тази линия до върха, казва, искам да чакам, докато всичко се зарежда така че ние сме гарантира, че всички елементи Търся всъщност са на страницата. Това знака за долар означава, че аз съм с помощта на библиотека, наречена JQuery. Това JQuery библиотеката ни позволява да използваме тези селектори, че ние просто погледна. Като казвам $ след това минава като аргумент # форм-цитат, Аз съм сега изберете тази форма, че ние просто се погледнете в. Сега имам представителство на тази форма в паметта по някакъв начин. 

На този обект сега, това представяне на формата, Аз съм сега използва функция, наречена. Тази функция е да прикачите манипулатора на събитие. В случай, че отива да слуша за Submit случай. Така че, когато потребителят кликне, които отправят бутон или преси Enter, това събитие се случва да стреля. С кука в това, сега мога да замените поведението по подразбиране на формата. Без тази JavaScript, формата ще представи какъвто и да е PHP файл ние използвахме, че действията атрибут. Но вместо това, аз сега казват, чакай, чакай, чакай, аз не искам да се прави, че. Искам това да се случи, преди да отидете и да се опитаме да се подчинят на някой файл PHP. Сега какво искам да направя? В този момент искам да използвам AJAX по някакъв начин, за да заредите каква е цената на акцията. Първото нещо, което трябва да знаете е, какво наличност потребителят търси. Да направя, че аз отивам да използвате друг селектор. Това е третият селектор сме разглеждали преди. Това казва, че искам да започна този елемент с ID на формата цитат. Тогава някъде вътре в тази форма трябва да има елемент вход че има име на символ. Ако погледнем назад в нашия HTML, видяхме, че имахме вход [име = символ. Това означава, че това се случва, за да изберете тази кутия текст, който потребителят пише в. Това е хубаво. Имаме текстовото поле. Сега ние просто трябва да се знае какво е вътре в него. За да направите това можем да наречем този метод тук. Вал и това казва, че знаете какво текстовото поле имате. Искам да ми кажеш какво е потребител, въведена в текстовото поле. Сега имаме поредица, наречена символ, който е равен независимо от въвели инча Това е хубаво. Ние можем да използваме тази струна се сега, за да направим нашата заявка. Това е нова функция, тук, това, освен, че вече няма да трябва да избират елементи, ние ще трябва да се обадите различна функция, която е предоставена ни от JQuery. Тази функция на AJAX е какво всъщност се случва да направи това искане HTTP. Така че ние трябва да го кажа няколко неща. Първото нещо, което трябва да кажем тази функция е мястото, където искам да отида на искането. Някъде в моя проект имам този файл вътре в HTML директория, наречена quote.php. Може да има достъп до този файл, видяхме, точно като това, ако отида в Localhost / quote.php. 

Искам JavaScript да отправят искане към тази страница. Какъв тип искане сега? Видяхме, преди това форма има този метод = "пост" атрибут, и това означава, че ще направи POST искане, така че няма да сложи нищо в URL, а от GET искане, които просто ще бъде уволнен, ако ние просто достъп до страницата с уеб браузър, например. Сега сме, че искам да се направи HTTP POST заявка към страница, разположен в quote.php. Когато ние се подчиним формата, не забравяйте, бихме могли да получите достъп до входните елементи във вътрешността на тази форма с $ _POST променливата. Досега в историята не са действително изпратени по всички данни, все още. Току-що каза, че ние правим заявка AJAX и тук е от типа на искане, което ние правим. Сега ние трябва да прати някои данни в страницата. За да направите това можем да използваме този имот, наречен данни. Стойността на този имот е асоциативен масив. Причината за това е, че ни позволява да изпратите повече от само 1 част от данните. Ето защо имаме тези фигурни скоби тук са вложени вътре в тези други фигурни скоби. Ключовете в тези асоциативни масиви ще бъдат едно и също нещо тези име качества в нашата форма елементи. Това означава, че ако изпратя по ключ на символ, това означава, че ми PHP страница може да има достъп до тези данни с $ _POST [символ] точно както правехме преди, когато бяхме подаване на формуляр. И сега актуалните данни искате да изпратите ще бъде стойността вътрешността на този асоциативен масив. 

Съхранява този текст в променлива наречена символ, и така ние ще изпратим заедно сега е ключът на символ и стойността на независимо потребителя въвели инча Сега сме направили това искане HTTP, нашата PHP файл е изпълнена, и това ще да изпрати някои данни обратно към клиент, който току-що направено това искане. Сега ние трябва да отговорим какъвто и да е сървъра ни каза. Да направите, че имаме този имот нарича успех. Стойността на този успех ключ всъщност се случва да бъде функция, и това е един от наистина готини неща, които можете да направите с JavaScript. Не само може да имате цели числа или масиви като стойността вътрешността на асоциативен масив, ние също могат да имат функция. Така че с думите успех, това е моят ключ. Дебелото черво казва тук идва стойност, и сега стойността на това е всъщност функция. Така че ние не трябва да се даде тази функция име само по себе си. Ние можем само да се каже, това ще бъде някаква функция. Ще отнеме 1 аргумент. Аргументът за тази функция ще бъде независимо от сървъра ни изпрати обратно от искането. Точно както когато нашият браузър прави заявка, сървърът изпраща нещо обратно и браузър показва, в контекста на AJAX, ние просто искане, сървърът изпраща нещо назад, и сега ние, представен като низ. С този низ Бих искал само да се покаже, че на страницата. Да направя, че аз отивам една последна селектор. Искам да изберете елемент с ID цена. Това е просто един празен DIV, че съм създал на страницата, и аз искам да се определят съдържанието на тази дивизия да бъде каквото ни изпраща обратно на сървъра. Аз действително промяна quote.php малко. 

Вместо да призовава мазилка и оказване на някои, quote.php сега просто ще изведем стойността на запаса като низ. Така че, ако сте били действително да посетите страницата, ще се види, че малките низ независимо от цената на акциите. Едно последно нещо, което трябва да направите, е просто се уверете, тази функция връща. Това казва е, че ако аз съм вътре на манипулатор на събитие и че манипулатор на събитие връща вместо да се завърне вярно, това означава, че аз не искам оригиналното събитие на огън. В този случай, ако ние не разполагаме с каквато и да е JavaScript и ние внесохме форма, нашия уеб браузър ще каже: "Аз ще пратя, че данни заедно" и те ще ви изпрати към друга страница. Защото ние използваме AJAX сега, няма нужда да изпрати на потребителя към друга страница. Ние просто ще покаже резултатите динамично на същата тази страница. Ние наистина не искате да отидете навсякъде, и аз искам да остана на същата страница. Така чрез връщане фалшиви, ние гарантираме, че формата не прави това за нас. Нека да разгледаме какво всъщност прилича. Цитат Нашата страница изглежда по същия начин. Остави ме да извадя инспекторът тук, за да можем да видим какво се случва. Уверете се, че малко по-малко огромен. Запомнете, че ако се отворим раздела мрежа, това е мястото, където можем да видим всички искания HTTP , които се случват на страницата. 

За символ нека въведете в AAPL и кликнете Вземи цитат. Сега видяхме, че делът на Apple струва известен брой долара току-що се появи на страницата, но адреса не се променя изобщо. Всъщност, тук е HTTP заявка, че ние просто. Направихме POST искане на quote.php. Това има смисъл. Това е, което ни изпраща обратно на сървъра. Това вече не е тази гигантска HTML документ с изображения и подобни неща, това е просто един текстов ред, и тогава ние просто показва линията на текст. Ако се върнем към заглавията и да видим какво всъщност изпраща в рамките на това искане HTTP, можем да видим тук, че ние изпратихме по ключов символ и стойността на AAPL, , което е това, което потребителят въвели инча Това е хубаво, но тя все още е малко досадно. Аз все още трябва да натиснете този бутон, за да получите оферта наличност. Ние сме заети хора и ние не разполагат с време, за да щракнете върху бутоните. Google осъзнах, че това преди малко, когато те изпълняват Google Instant. Google Instant е така, както пишете, просто започва да показва резултати за Вас така че не е нужно да се притеснявате за дори щракнете на Търсене. Всъщност, забавна история, свързана с това. След като Google Instant излезе, хората бяха като: "Уау, това е супер невероятно." "Това е толкова готино." И студент в Станфорд, който е 19 по време направих този сайт, наречен YouTube Instant. Всички YouTube Instant се търси ефективно YouTube незабавно. Така че, вместо да се налага да отида до YouTube.com и натиснете Търсене, когато започнете да пишете в YouTube Instant нещо като CS50, можем да видим, че се опитва да бавна връзка към интернет пренесат тези резултати на живо. Да направим това всъщност може да направи една много проста промяна в нашия quote.js файл. В момента се отдава на това събитие, когато формулярът се подава. Ние наистина не искате да направите потребителя твърдят, че формата вече, така че нека вместо огън този случай всеки път, когато потребителят натисне ключ. Да направите това, нека първо да промените събитие от представя keyup. Това означава, че вместо да чакате формуляр за подаване, всеки път, когато бутонът бъде натиснат, нещо ще се случи. Той вече не прави смисъл да запорира тази keyup събитие за цялата форма. Ние наистина само се грижи за това полето за търсене. 

Да изберете, че сега, ние можем да променим това да бъде, а от формата цитат форма оферта и ще имат принос (тип = текст) или бихме могли да кажем (име = символ) - каквото си искаме. Сега има едно последно нещо, което трябва да направим. Запомни тук, когато казахме, връщане фалшиви казахме, че не искам този случай да стрелят по подразбиране. Но просто така се случва, че ако ние прекратяваме, че сега, каквото и да напишете няма да се появи повече в браузъра защото това би било поведението по подразбиране да пишете в текстово поле. Ние вече не искате да замените това, така че нека да унищожи това завръщане фалшива. Ако пестим, че и се презарежда страницата, сега, когато започнете да пишете AAPL ще видите, че цената на акциите на дъното тук приключва автоматично. Така че тук е CS50 финансите Instant. Всъщност забавна история за YouTube Instant е, че студент просто си го е написал като 1 нощ проект, и на следващия ден той бе предложена работа от YouTube изпълнителен директор. Така че, просто, CS50 студенти, вашият крайните проекти могат да получат работа в YouTube. Нещо подобно е наистина страхотна идея за окончателен проект, нали? Имахме някои съществуващи функционалност, която ние искахме да се интегрира с. Ние подобри потребителския опит малко, и изведнъж търсите нещо на YouTube Instant може да бъде много по-лесно от търсене за него на редовно YouTube. Така че това е AJAX в орехова черупка. 

В примерите, че Йосиф беше, показващи, видяхме много autocompletes, и тези autocompletes са наистина много удобен, защото ние не трябва да се помни - Например, ако не си спомням цената на акциите за Apple и ние просто знаем, че е аа нещо, вместо просто да ми казва, "Акции на това нещо струва толкова много пари", Бих вид искал да знам какво запаси започват с аа. Ние можем да направим, че наистина добре с Bootstrap библиотека, която вече е включена вътре на CS50 финансите. Ако идвате тук, за да етикет JavaScript и превъртете надолу до Typeahead това е просто хубава плъгин, че някой вече писа за нас, и ние можем лесно да използвате функционалността му по този начин. Аз напечатани в А и тук е списък на някои държави, които започват с А. Да кажем, че аз мисля, че това е наистина страхотно и е време за мен да се включи тази на моята страница. Оказва се, че това е много, много проста. Нека прескачат тук, за да quote3.js. Файла ми изглежда малко по-различно. Тук всичко на моите неща AJAX е един и същ. Искам да заредите данните за салдата, без да се налага да отидете на друга страница. Но сега искам да използвам този плъгин. Bootstrap документация има много примери за това как точно мога да направя това. Искам да кажа: "Ето на входа, че искам да довършим" и аз ще се обадя на тази функция, наречена typeahead, и че ще се справят с всички на Typeahead неща за нас. Тя ще се инициализира списъка, той ще направи всичко от нашите филтриране. Единственото нещо, което трябва да знае какви данни сме autocompleting на. Така че намерих този ключ само с четене на документацията и примерите. Ако го даде ключ от източника, стойността на този ключ е просто някакъв набор от неща, които искам да довършим. Тази променлива дойде от този друг файл. Отворя symbols.js. 

Тази symbols.js е просто наистина, наистина голям масив, съдържащ струни на всички тези символи на акции от NASDAQ. Ако искате да се върнете назад към HTML, така jharvard, хостове, globalhost, HTML шаблони, quote_form. Тъй като сега се нарича quote3.js, позволете ми да промените файла JavaScript аз съм включително и тук. Сега имам quote3.js, така че аз отивам да се зареди в този отделен файл, JavaScript, този, който е, че Bootstrap функция за автоматично довършване. Сега, когато скочи обратно към браузъра, презаредете страницата и започнете да пишете аа, има функция за автоматично довършване ми. И това беше наистина толкова просто като това. Имах 1 линия на кода, който току-що каза: "Това са неща, които искам да довършим", и изведнъж аз имам този наистина страхотен човек функционалност не е цяло много от усилията на всички. Както сте разработване на уеб сайтове и по-специално на предната страна на края на нещата, ти започваш да се намери, това е много. Има много, много, много наистина готино безплатни библиотеки там , които го правят супер лесно да се направи нещата по този начин. Може ли някой да мисли за някакви недостатъци на просто autocompleting на този голям списък на символите? Какво би могло да бъде нещо, което не е най-добре с този подход? Да. >> Студент време, ако имате много на недоловим] Да. Точно сега сме изтеглянето на този огромен файл JavaScript и има много символи. И така, ако имаме един тон неща, това би могло вид на увеличаване на латентността не само на търсене но също така изтегляне на действителния файл. Велики. Нещо друго? Точно сега няма истински смисъл от значение. Ако пиша в А, компаниите, които се показват тук може да не е от най-популярните компании, които започват с А. 

Преди да стигнем до Apple, може да отнеме още няколко знака, за да намерите това, което търся. Това автоматично довършване не този смисъл от значение. Това е просто да каже: "Всичко, което съвпада Отивам да се покаже." Вместо това, бих искал по някакъв начин да се интегрират известно значение в моите търсения. Ако отида тук, за да Yahoo! Finance, finance.yahoo.com Ако се опитам да въведете символ на страница на Yahoo! Finance и започнете да пишете GOOG, аз имам този хубав списък на нещата. Ясно е, че прилича на Yahoo! Finance прави нещо по-умен тук. Те имат значение и те също имат допълнителна информация като името на запаса. Това е нещо, което аз не мога да се само с моя състав списък на символите. Искам това, така че аз отивам да го вземе. За да направите това нека да направим няколко неща. Нека първо отваряне на инспектор на тази страница защото видяхме, че тази страница не е претоварване на всички, така че е вероятно използва AJAX по някакъв начин да се зарежда неговите данни. Можем да разберем какви данни натоварване. Ако кликнете върху раздела тази мрежа, те ще бъдат всички искания, които започват да бъдат уволнени. Сега, ако пишете в слуз, можем да видим, че току-що получих ново искане HTTP. Това е вероятно, че данните идва от. Разбира се, ако погледнете на този адрес, което е малко странно име, можем да видим, че това е точно там, където Yahoo изпраща данните си от. 

Съм създал отделен файл наречен suggest.php, че е много подобен по смисъл с функция за търсене. Това е основно ще направи заявка към URL на Yahoo, да се върнат някои данни, и да го изпратите обратно към мен. Сега, вместо да използват този голям, огромен списък от символи, Мога да използвам хубави неща Yahoo актуалност, и аз не трябва да изтеглите тази масивна JavaScript файл. Аз само ще събарят действително значими символи на акции. Да скочиш в това. Така че, HTML, JS. Сега сме през quote4. Сега ние вече не се използва, че голям списък на файловете JavaScript. Но има един малък вид дизайн проблем тук. Съм казвал, че в AJAX е асинхронен. Какво означава това е, че когато направи искане AJAX, така че тук по линия 8, това е мястото, където ми AJAX искането е уволнен. Да речем, че сега имам някакъв код тук, че ще направи някои неща като предупреждава потребителя или нещо промяна на страницата. Това, което не може да се случи е браузърът няма да се чака за това искане да продължи преди да дойде и удря тази линия. Това е асинхронен част. Той ще направи това искане и да каже: "Всеки път, когато завършите, "Се върна и се обадете тази функция, което ви казах да се обади в рамките на успеха." Това означава, че не можем просто да изтеглите всички запаси предварително. Ние трябва да направи искане и да чакаме нещо да се върне. Това означава, че и преди, бихме могли просто да кажа Bootstrap, "Това е списък на нещата, които искате да довършим". Вече не можем да направим това вече, защото ние не знаем какво искаме всъщност функция за автоматично довършване на. За щастие, Bootstrap помисли за това, защото тези, които са умни момчета там, и те наистина ни даде друг начин да се зареди този Typeahead плъгин. Преди това стойността на този източник имот е само този голям набор от неща да довършим. 

Сега източник всъщност е функция, и целта на тази функция е да разбера какви неща да довършим. Начина, по който тя ще да разбера, че е ще да попитам финансите Yahoo! Какви са най-добрите неща да довършим. Да направя, че аз отивам да се направи много сходни AJAX искане. Отивам да поискат тази страница по suggest.php. Искам да изпратя заедно символите все още. И сега ми успех, Bootstrap документация ми каза, , че за да се пренесат този списък на нещата, всичко, което трябва да направите е да премине в този масив на функция за обратно извикване. Но почакайте минута. Ако това е трябвало да бъде масив и AJAX ме изпрати обратно текст, как е възможно това? Това въвежда нов начин за обмен на данни, наречени JSON. В този случай ние не просто изпрати обратно просто низ от текст. Сега ние сме се занимават с това по-сложен списък на фондовите символи. Тези символи на акции може да включва и неща като името на компанията или текущи цени. Само с помощта на голям дълъг низ, който не е форматиран във всеки предвидим начин няма да бъде най-добрият начин да се получи тази информация от сървър на Yahoo за мен по такъв начин, че може лесно да разбере. JSON е технология, която се възползва от това как ние създаваме асоциативни масиви в JavaScript. Това изглежда много прилича на асоциативен масив JavaScript, и в действителност, това е, защото това е. JSON стои за JavaScript Object Notation. Това е основно договорен формат за прехвърляне на данни назад и напред. Ето този обект JSON или това JSON асоциативен масив ми изпраща някои данни за курс. 

Ключовете на този масив са неща, като разбира се, че има стойност на cs50, и тук можем да видим, че може да има стойност, която е масив. Не е нужно да правите неща като разбор от струни и търсят запетаи и да правя луди неща като това. Защото това е декларирано в този формат JSON, JavaScript и JQuery вече имат функция за преобразуване на низ , който изглежда като този JSON в истински асоциативен масив JavaScript че можем да работим. Правейки това е толкова просто, колкото казват, че вече не е такъв файл, suggest.php, изпращане ми се просто низ от текст, но знам, че ще ме изпрати обратно JSON. Това означава, че тази JSON могат да бъдат превърнати в асоциативен масив JavaScript. И така, JQuery, бих искал да направиш това за мен. Това означава, че този параметър за отговор тук, това вече не е само низ. Защото сме казали Jquery, че тук идват някои JSON, Jquery ще бъде достатъчно умен, за да каже: "Ти искаше JSON? "Отивам да конвертирате в асоциативен масив за вас." Нека да погледнем в раздела мрежа, след като имаме quote4.js. Ще променим това и се презарежда страницата. Сега отивам да въведете по-отново. Аз направих няколко искания към suggest.php, но сега този отговор, а не само низ, това е JSON. Така че аз имам отворен фигурна скоба казва: "Ето идва асоциативен масив." 

Първият и единствен ключ на този асоциативен масив се нарича символи, и след това тук е масив на съответните символи от Yahoo! Finance, а не от този гигантски списък. Ето как може просто да попълните тази функция за автоматично довършване плъгин с някои данни, които не идващи от локален файл, който вече предварително а от нещо друго. Оказва се, че всъщност можем да се възползват от технология, наречена JSONP, или JSON с пълнеж, който ще елиминира тази suggest.php посредник. Но вместо това, нека, вместо да погледнем как може да подобри още повече. Аз наистина харесвам Bootstrap е Typeahead. Това е много хубаво. Но ние сме все по-добри в JavaScript и ние искаме някак да направите това се може би да разгледаме какво този плъгин може да се прави. Нека вече не се използват, че Typeahead нещо, и нека се опитаме да направим този списък на предлаганите запаси се. Тук в quote6.php ние ще започнем по същия начин. Всеки път, когато някой напише нещо, ние искаме да направим искане за AJAX. Това е подобно на първоначалното ни CS50 финансите Instant. Вместо да отправя искане за quote.php, ние сме вече направи заявка, че един и същи файл, както и преди, този suggest.php, , която е просто ще да тегли данни от Yahoo! Finance. 

Отново, ние все още очакваме JSON, но сега, тъй като Typeahead не прави това за нас, ние също трябва да изпратите по протежение на стойност, която е в рамките на текущото текстово поле. Сега ние знаем какво да питам финансите Yahoo!, и така сега тук е функцията, която искаме да се изпълни, след като искането завършва. Ние нямаме плъгин да се направи списък за нас, така че тук е мястото, където ние всъщност ще се изгради списък с предложения. За да направите това, много искал в PHP свръхдълги тези големи струни на HTML след това те да бъдат отпечатани, ние можем да направим същото точното нещо в JavaScript. Първо отиваме да започнем този низ, наречен предложения, и този низ е просто ще съдържа някои HTML. Искаме тя да е списък на нещата, така че ние ще започнем с този списък маркер, и сега отиваме за обхождане на всички символи, които са върнати обратно към нас. Не забравяйте, че защото сме казвали ТипДанни: "JSON", това не е низ. Това вече е масив за нас. Това е наистина страхотно. Можем просто да се каже, "Искам да добавите елемент на списък". Ние ще го постави вътре в елемент страна на това, ще го дадем клас предложения, така че ние знаем какво е то, и сега тук е символ, че се върнахме от Yahoo! Finance. 

След като ние създадохме елемент за всеки от символите, които сме придобили обратно, ние просто искаме да затворим списъка. Така че сега предложения представлява тази малка HTML фрагмент че когато се пускат на една страница ще бъде списък на нещата, които търсим. Сега нека сложи това на страницата. Да се ​​направя, че съм създал друг празен DIV и съм го дал ID предложения. Много прилича определяне на съдържанието на DIV, които биха показване цената на данните за салдата, сега просто искате да зададете съдържанието на тази дивизия какъвто и да е този низ е , който съдържа тези символи. Като използвате този HTML метод, предложения променлива, тази стойност е низ от HTML. Искам да направите тази HTML и го сложи вътре на DIV нарича предложения. Току-що приложена нещо на DOM. Сме добавили някои нови елементи на DOM, че сега можем да се показват на страницата. Нека видим как изглежда това. Ако ние се зареди през quote6 и сега се връщаме, сега, когато започнете да пишете AAPL, ние вече нямаме че Bootstrap функция за автоматично довършване, но сега ние имаме този списък, които самите ние. Това е малко грозно малко от Bootstrap Typeahead, например, но тя не ни позволяват да правим нещо друго. Когато търсим в този Bootstrap плъгин видяхме, че когато autocompleted, един на автодовършване стойности е AAPL. Това може да не е толкова полезен. Като потребител, не може веднага да се признае, всички символи на акции. Това, което аз съм може би по-вероятно да се признае, са действителните имена на компанията. Така че не би било наистина полезно, ако вместо да казва AAPL това каза нещо като Apple Inc. Защото сме навити това себе си, много лесно можем да направим това. Да отворим последния файл цитат тук, така че quote7. 

Същото нещо. Току-що създадена друга PHP файл, който ще се върне към нас повече, отколкото само символите. Тя също така ще ни даде имена на компанията. И така, ние правим едно и също нещо. Правим искане за AJAX. След като молбата е завършил, ние сме тук, за да изпълнява тази функция, и тази функция ще изгради една голяма поредица от елементи. Но разликата тук е, че стойността на тези списъци вече не е само символ, това е сега името. Така че ние имаме един малък проблем. Когато използваме справка, ние трябва по някакъв начин да го давате символа. Ние не може да премине търсене на нещо като Microsoft Corporation. Ние трябва да премине MSFT. Когато пишете HTML, имаме много хубави вградени в атрибутите. А може да са свързани с HREF или клас. Но това, което наистина се нуждаем сега, е за всяка една от тези връзки да има определено количество символ, свързан с него. Не е вграден в HTML атрибут за наличност символ, но за щастие, HTML5 ни позволява да създаваме нашите собствени качества, за да бъде каквото си искаме. Като казвам-символ на данни, въведохме нов атрибут чието име току-що направихте, и това е добре, защото аз го започва с тези данни. Отиваме да се съхранява вътре от там символ от запаса. Какво означава това е, че макар и да показва стойността на името на фирмата във вътрешността на нашата функция за автоматично довършване, ние сме все още помня символа която е свързана с всяка компания. Начинът, по който правим това е в рамките на този елемент. Така че това означава, че ние трябва да направим още една промяна. Когато кликнете върху него, ние трябва действително да се възползват от символа атрибут , а не само неговата стойност. Ако ние обратно, ние отдаваме манипулатора на събитие за предложения. Когато едно от тези предложения е кликнал сега искам да направя нещо. Това, което искам да направя, е да промените стойността на това поле за въвеждане. Сега искам да зададете тази същата функция Вал. 

Така че, без никакви аргументи тази функция Вал се връща към това, което вече е в текстовото поле, но ако ти я дам низ, ще отнеме тази струна и го сложи в текстовото поле. Аз съм избора си текстовото поле по същия начин. Името е символ вътрешността на формата цитат. Сега съм го изпратите стойността на атрибута символ на данни. Това нещо тук е ново, този $ (това). Това се отнася до е елемент, който е кликнато. Ние можем да видим, че ние не сме закрепване едно кликване събитие всеки елемент с клас на внушението индивидуално. Вместо това, ние се приближаваме към това е малко по-различно. Вместо това, ние се казваш, когато нищо вътре на тази дивизия предложения, които запомните е просто контейнер за този списък, ако нещо вътре в тази дивизия е кликнал и има клас на внушението, Искам това събитие на огън. В общи линии, какво означава това, което можем да направим, е да използвате повторно същото това манипулатора на събитие за всички неща в списъка. Така че ние не трябва да има един манипулатор на събитие за първия елемент и различен манипулатора на събитие за втори елемент. Вместо Можем да кажем, "Аз искам същото манипулатора на събитие да се прилага за всичко в моя списък." Но ние трябва по някакъв начин да се знае кой елемент е кликнато. Тази "тази" ключова дума представлява точно това. Това е обект, който е кликнал от потребителя. Ако е кликнал на 3-ти връзка, това представлява елемент на тази 3-ти връзка, което означава, че мога да му атрибут,-символ на данни, което знаем, трябва да съдържа символ, който е свързан с компанията, аз просто кликнали. Ако се върнете назад към нашия финансов страница можем да видим, че щом започнете да пишете нещо като MSFT вече не сме само символи на акции, ние сме вече съществуващи фирми. Но когато кликнете върху една от тези компании, можем да видим, че ние всъщност населяване текстовото поле с името на компанията но с каквото е била съхранявана в рамките на тези данни атрибути. И така, ако аз действително инспектира един от тези елементи като щракнете върху него с десния и щракнете върху Проверка на елемент, ние всъщност може да видите как изглежда това. 

Не забравяйте, това е нещо, което се създава вътре, че за цикъл когато строяхме че низ от HTML. Ние можем да видим, че този символ данни има стойност на MSFT, което е страхотно. Това е това, което са очаквали. Това е символ и това е как сме стигнали, че трябва да използвате стойност вътре в това текстово поле. Това е достатъчно за цитат форма, защото това е нещо скучно. Нека просто да направи някои бързи подобрения в нашето портфолио страница. Ако сте използвали CS50 финансите за известно време и да започнат да купуват и продават много на запасите, в крайна сметка тази таблица ще се получи доста голям, и ти започваш да искаш на акция, разбира се. След като таблицата е много, много голяма, тя може да бъде полезна за потребителя да се опита да търсите над него. Вътре в полето за търсене, ако започнете да пишете нещо като "Дисни" и търсят за Мики Маус наличност, можем да видим, че таблицата е сега филтриране въз основа на това, което току-що въвели инча Тази функционалност изглежда супер сложно, но това е много, много лесно с JQuery и JavaScript. Това portfolio.php файл включва JavaScript файл, наречен portfolio.js. Нека хвърлим един поглед на това. Така че, HTML, JS, портфейл. Тук е мястото, където правим, че търсенето на масата. Първото нещо, което трябва да направите е да прикачите манипулатора на събитие, че текстовото поле защото знаем, че искаме нашата филтриращи функции на огън всеки път, когато потребителят натисне нещо, защото нямат време за търсене бутони. Първото нещо, което трябва да направите, е да разбера това, което потребителят търси, точно както направихме преди. Тази ключова дума се отнася към текущия елемент взаимодействие с потребителя. 

Тъй като потребителят взаимодейства с полето за търсене, $ Това представлява полето за търсене, така this.val ни дава това, което е вътре в полето за търсене на потребителя в момента е да пишете. Така че, сега това, което искаме да направим, е да искаме за обхождане на всички редове в рамките на нашата трапеза. За да изберете всички редове в нашата маса, дадох тази таблица ID на таблицата портфейл, и се представлява от всеки ред елемент TR, така че това селекторът ще се върне да ме голям масив на всички редове в моята маса. Сега искам да обхождане на този масив. Можех ви контур, но Jquery всъщност ни дава хубава функция, наречена "всеки". Това, което всеки прави, е всеки приема само един аргумент, и този аргумент е функция. Какво ще направи, е, че ще прилага тази функция към всеки елемент вътре в този списък. Тази функция приема само един аргумент, това е електронна, и когато тази функция се изпълнява, това е ще да бъдат заменени с първия ред, след това на втория ред, и след това на третия ред. По този начин, това е същото нещо като работи за цикъл и след това, фигуриращ на текущия елемент, въз основа на индекса вътрешността на линия. На всяка итерация, за всеки един от тези елементи в таблицата, Искам да проверя, ако текстът на елемента - текстът на клетка вътре в реда - съответства на това, което търсите. Тази голяма дълга поредица от команди е как мога да го направя. Първо, отново, това сега се отнася до - защото това е вътрешността на нова функция - това и в момента е ред на таблицата. Искам да взема текущия ред в таблицата, и аз искам да получите всички на своите деца. Не забравяйте, че DOM е йерархично дърво, което означава, че елементи имат броя на децата. 

. Деца функция ще се върне да ми се масив на всички елементи това са деца, в този случай, един ред в таблицата. Това е просто клетките във вътрешността на реда. Аз просто искам да търсят в първата клетка. . Първата функция, която казва, че ми даде първия елемент в този масив. След текст функция казва ми точно какво има в тази клетка тъй като искам да търсете в този текст. И накрая, нека да го конвертирате в малки, така че можем да направим текст нечувствителен запитвания. И накрая, ние искаме да видим дали тази струна вътре в таблица съдържа низа търсиш. На indexOf функция в JavaScript прави точно това. Тя ни казва, дали или не този низ съдържа друг низ. Ако е вярно, че клетката съдържа това, което търсите, после искам да се уверите, че е показано. Методът шоу ще каже: "Покажи елемент." Ако това не е така, тогава това означава, че каквото и да търся не се съдържа в този ред, и затова искам да се скрие от потребителя. Това се постига, че хубаво филтриране ефект, когато вече не виждаме цялата таблица. Ако сте заинтересувани как да правят това махало, както и, ние ще публикуваме източника онлайн. Но това е много проста. JQuery има страхотни методи за тези анимации и манипулиране на имоти CSS. Така че, това е за мен. 

Какво предстои? Както ще видите след няколко дни, окончателното предложение проекти се дължи. Окончателното предложение проекти ще ви задам няколко въпроса, но сред тях ще бъде три основни елемента - един "добър" крайъгълен камък, един по-добър етап, и един от най-добрите. Идеята е наистина да помогне на вас, на вашите очаквания така че минимално ще бъде доволен от продукцията на своя окончателен проект и това ще бъде "добра" доколкото сте загрижени. Но след това в интерес на получаване да се достигне само малко за нещо по-добро или нещо най-доброто, ние ще сортирате ви тласне към това, както добре. CS50 Hack-а-Thon, междувременно, е в рамките на няколко седмици. Обикновено, ние правим това въз основа на лотария основа, защото на интереси, но шансовете са, че ще отнеме няколко стотин от нас автобуси от Харвардския площад Kendall Square, където Microsoft има красива съоръжение, уместно наречен "NERD" - New England изследвания и Център за развитие. Ние ще стигнем до там около 20:00 Ще имаме някаква храна. Около 1 ч. ще имаме повече храна. Около 5 часа сутринта, ако сте все още буден, ще минете през ИХОП или ви отведе обратно към колежа. Целта е да се потопите в крайни проекти заедно от съучениците и персонала. След това няколко дни по-късно е CS50 панаир, което наистина е трябвало да бъде една възможност за вас, момчета да покажат работата си и постижения за семестъра а рамо до рамо с един от друг и смисъла на това, което всеки направи. С това каза, много благодаря на Томи и Йосиф, и ние ще се видим в понеделник.  [Аплодисменти]