[Powered by Google Translate] [Семинар] [Веб развој: Од идеје до реализације] [Бен Кун] [Билли Јанитсцх] [Универзитет Харвард] [Ово је ЦС50] [ЦС50.ТВ] [Билли] Здраво, ја сам Билли и ово је Бен. >> [Бен] Здраво. Ми ћемо да причамо о веб развоју данас. [Вебдев] [Били Јанитсцх и Бен Кухн] Мало о нама први. Бен је врста бацк-енд момка. Он чини ствари раде. И онда ја одем у и да их прилично. Ја сам у великој мери укључени у више фронт-енд дизајн распоред такве ствари, и Бен, с друге стране, зна шта ради па ради на бацк-енд ствари. Заједно смо направили пар ствари. На пример, прошле године смо радили на Гимблиум који је на мрежи развој Гаме Студио. То је био наш коначни пројекат за класу, и од тада смо направили харвард Цласс који је на мрежи оквир за претраживање и тржним курсевима на Харварду. 

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

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

Да будем конкретан, обично људи поделити веб апликацију у - то су врста зујати речи сада, али они су још увек корисна. Можда сте чули људи говоре о моделима, погледа, и контролора. Модели су стварни подаци да је ваша апликација ће да се бави. На пример, у вашем Цат Фацебоок, ваши модели ће бити - да би имао модел за поруке, као што су, као и модел за корисничких профила, такве ствари. Ваши ставови су како представити те податке вашим корисницима. Можда имате 1 приказ за гледајући један пост и све коментаре и другачији поглед на ваш зид који има списак свих постова који су усмерени на вас, и другачији поглед на ваше вести феед - такве ствари. На крају, имате контролоре који су у основи када људи вам послати поруке и ви направити исправке за ваш бацк-енд системом, Ви увећава гомилу шалтерима, и шта год. То су твоји контролори. 

Идем да се углавном говори о моделима. Погледи су технички није тешко и питање је више са њима пројектовање Контролори ће бити специфично за све што сте пројектовање. Али постоје неке прилично опште технике које можете користити да ваши модели лепше и лакше да раде са да мислим да су веома корисне. Ово је углавном ће бити о томе како да се носе са својим Веб Аппс података на леп начин. Главни проблеми са моделима су да живе на клијента и сервера и морате да схватите ) како да их добију - све релевантне оне - од сервера до клијента, и б) како да их задржи у синхронизацију. Ваши корисници ће желети да направи неке исправке. Они ће желети да направи нове постове. Они ће желети да воле ствари и ствари, ако имате воли. То су главни технички изазови баве моделима. Прва ствар коју ћете желети да се запитате је која врста података се у овом моделу и какве упите ћемо да желите да урадите - то јест, како ћемо да погледате моделе? За вашег Цат Фацебоок пример, Ваша порука ће имати аутор у вези са њим, неки зид текст поруке, а прималац зидне пост. А онда ћете можда желети да упита да у гомилу различитих начина. Ти би хтео да гледам по ко је написао коју пост, од који су добили који пост, можда од датума када су постављене. Али ако идете да то урадите по датуму, онда морате да додате још једно поље на ваш пост од када је заправо постављен. Ови фактори 2 - шта податке које желите да користите и како желите да га видите - требало би да размислите о њима прво, јер зависе једни од других, и то ће бити теже да их додате касније. 

Постоје неки други разлози. Када размишљате о томе како да се баве моделима на серверу шта желите да погледате је - Ви желите да се у основи серверу што једноставнија. Доинг ствари на страни клијента је обично много брже ако то можете да урадите само на клијенту без радите било коју врсту захтева мреже. Идеја је да се уради што више упита као што можете на клијенту. Једини проблем са тим је да ако захтевате све своје податке на почетку затим да ће требати доста времена да се учита. Дакле, идеја је да се штрајк срећан медиј између има довољно података о клијенту да можете да урадите већину свог посла нема, али не само привлачан све одједном тако да се заиста споро време учитавања на почетку. На пример, за вашу мачку података ти би вероватно желети да донесе гомилу последњих зидних порука. Не желите да донесе свима њима јер би то могло да се вратимо пар година. Али ви не желите да им донесе један по један јер би увести много мрежног изнад главе. 

То је често прилично тешко - једном имате базу података ради - често је прилично тешко да се промени оно податке имате у њему - то јест, додати нову колону базе података или нешто - па једна добра стратегија је заправо само да доста података у текстуалној грудвица - ЈСОН блоб - ЈСОН је ЈаваСцрипт Објецт нотација - Разлог је то корисно је јер тада можете да додате нове особине да све ове ЈСОН мрље без промене базу података. Једина лоша страна тога је да ако имате гомилу поља који сте додали касније - као сакривени у том ЈСОН грудвица - онда је теже да их упита у базу података. На пример, ако касније - ако сте имали свој пост модел који смо раније разговарали са само аутору, примаоцу и текст - можете и да имате ЈСОН Блоб и онда ако касније желели да додате поље датума Ви не би морали да промените своју базу података. Можете само додати датуме на све текстуална поља. И онда би могли да погледате оне на страни клијента, али ви не би били у стању да их упита на страни сервера јер је скривен у том тексту. 

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

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

Као пример онога што смо до сада говорили, ево пример тока за ваш Цат Фацебоок апликације. Она почиње са свалане тражиоца база УРЛ адресу веб сајта. Сервер вероватно ће послати преко статички ХТМЛ и ЈаваСцрипт и ЦСС нешто. То је обично најбоље да не раде никакав приказ на серверу. Ви вероватно не желе да - оно сервер не ради тамо иде доле листу зидних порука и генерисање неке ХТМЛ за сваког и слање да преко. То је обично најбоље да то урадите на страни клијента, јер у супротном сваки пут када желите да поново скрене нешто, морате да направите захтев сервера. И то веома брзо вам даје много изнад главе. То је обично најбоље само да брод шаље доле статички ХТМЛ а затим ЈаваСцрипт и ЦСС који ће учинити рендеровање на страни клијента. Чим та ствар долази у, онда можете имати - у ЈаваСцрипт - можете да урадите захтеве за подацима зида и слично, а након тога је сервер у основи само ради упита базе података и проверу дозволе. Једина важна ствар је да се не може послати преко неке друге корисника зидне поруке да ти није дозвољено да виде. То је у основи може бити веома танак слој приступ у базу података, а онда све показује податке - све ставове и ствари - они се може десити у вашем претраживачу, а онда када желите да направите пост или нешто само послати још један захтев. 

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

А ту је и још 1 библиотека које бих желео да проведем мало времена на зове Бацкбоне.јс јер кичма заиста помаже да се баве моделима на страни клијента и доста конфузије која може да проузрокује. Кичма вам даје овај концепт модела и збирки у којој су у основи ЈаваСцрипт баш као ЈаваСцрипт објеката у ЈаваСцрипт низовима, али они имају догађаје када промените своју имовину. Баш као у ЈаваСцрипт, можете имати догађај када дугме добија кликнуо или нешто ови модели и Бацкбоне Бацкбоне колекције ће емитовати ствари као да када промени. То значи да можете да напишете нешто попут овог исечак кода овде - ово каже, сваки пут када додате нешто на поруке низа сте прекраја цео зид. А то ће рећи кад год број А Пост-а од воли мења, ви обавестити корисника да је неко волео свој пост. Или кад год било власништво пост мења ти прекраја пост. Такве ствари ће вам уштедети тона сложености, јер у супротном ако немате неких оквира као ово онда сваки пут у вашем коду да промените нешто о посту, морао би да се сетим да позовем све Рендер функције и слично, а ако желите да додате нешто ново што се догодило сваки пут када модификован пост да ћеш морати да прође кроз свако место у вашем код који сте модификован пост и додајте ту нову ствар. Оквир овако ће уклонити много тога између-слоја комуникације који чини ваш број сложен и тежак за одржавање. 

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

Ту су и неке напредније ствари које можете да урадите ако тражите да ваш веб апликација екстра страва. То можете да урадите - нови ХТМЛ5 спецификација има много фенси ствари које можете урадити. Локално складиштење - што је можете сачувати податке у претраживачу - уместо да се вратим и прегледати сервер за све, можете задржати нешто од тога на клијента и да чак омогућава људима - у неким случајевима чак може пустити да користите веб странице ван мреже. Постоји та ствар се зове вебсоцкетс које су другачија врста мрежне комуникације где уместо само правите један захтев, добијате одговор и готови сте, чувате отворили везу са сервером и тако можете да урадите ствари као што је у реалном времену исправке. Дакле, ако сте покушали да направите апликацију за ћаскање, можете да користите вебсоцкетс да комуницирају и назад, тако да не би морао да тражи, "О, сервера, да ли је неко ми пошаље разговор?" сваких 10 секунди или тако нешто. Ту је занимљива функција ХТМЛ5 где можете да изгледа као УРЛ адреса странице се мења без потребе да заправо га поново. Можете да користите дугмад БАЦК и ФОРВАРД без раде гомилу мрежних захтева. Такве ствари је заиста корисно у смислу што је брз, али такође ради као веб апликација би требало,. 

Ту је и та ствар се зове ЦоффееСцрипт. ЦоффееСцрипт је другачији језик, заправо, да саставља доле на ЈаваСцрипт. Ти би писати сав свој код у ЦоффееСцрипт, а затим покренете овај компајлер, и она избацује ЈаваСцрипт фајл који можете укључити у своју веб страницу. Разлог да ЦоффееСцрипт је лепо зато што добија ослободити од много чудни случајеви да ЈаваСкрипт има где једнако једнако, и једнако равноправни радим различите ствари, или воле - има лепше синтаксу за рад са низовима и функцијама. Ово је мали одломак из ЦоффееСцрипт који производи листу свих квадрата од 10 ^ 2 на 1 ^ 2 обрнутим редоследом. Као што можете видети, ЦоффееСцрипт често вам омогућава да изразите у 1 линији шта би 5 линија ЈаваСцрипт. То може учинити ствари много лакше. То је мало нове синтаксе да уче на први, али то дефинитивно ће вас продуктивнији на дуже стазе. 

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

Као општи завршити, главни Такеаваис су држати ствари једноставно. Сложенији је ваш број је на почетку и више покушате и урадите фенси ствари, више ће бити потребно да се нешто заиста функционалну и теже ће бити да се промени касније. Дакле, урадите ствари на глупу, лак начин први. Да иде уз то, не плаши се ни бацити стару шифру или га чишћења много. У принципу, када заправо имате нешто рад, то је много лакше да размишљају о томе него када сте још увек у почетним фазама од како сам ставио ово све заједно. То је најбоље да се направи најглупљи могући дизајн који ради а затим га побољшати итеративно него покушавају да добију све како треба први пут. У питању клијент-сервер поделе, покушајте и задржати свој сервер врло једноставан - само база података и неки аутентификацију и не раде никакав тежак посао тамо. Да ли све ваше компликоване ствари на страни клијента у претраживачу у ЈаваСцрипт-у колико год можете. Погледај око за библиотеке које чине ваш живот бољим. Увек боље користити код који је неко други написао ако - а не да га пишу сами. Има пуно ствари на Интернету. Гоогле је твој најбољи пријатељ. Гоогле је најбољи пријатељ програматора. Да, дефинитивно не плашите се да погледате око за ствари. У реду. И преко Билију. 

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

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

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

Онда имате ЦСС који у основи рукује свим аспектима дизајна статичких. Било би обради све боје, све позиционирања различитих елемената, где иду у односу једних на друге, колики су, различите врсте позиционирања да би сте - Другим речима, можете да се ствари фиксне, тако да када се померате надоле они остану, или можете имати ствари у односу на друге елементе. Све такве ствари је у ЦСС. Поред тога, можете да урадите разне украсе, можете имати боје текста, текстуални ефекти, све такве ствари. Бен је стварно добар семинар о овом прошлог викенда, и тако ја дефинитивно бих проверити да се ако планирате да радите неке фенси ствари са ЦСС. ЦСС3 је заправо најновија верзија ЦСС, и то може да уради све врсте заиста лепе ствари. То може да уради преливе, можете имати лепе, заобљене углове, можете да урадите све врсте ствари да би ваш сајт изгледа више модерно и фенси. 

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

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

Још једна ствар коју желите да покушате да урадите је, ако неко ће ићи на свој сајт и 9 од 10 пута урадити акциони А, и 1 од 10 пута урадити акциони Б, вероватно желите да се фокусирате своје искуство о акционом А. Другим речима, ви желите да га веома, веома јасно како то да урадите А. Треба да буде предњи и центар - идите на сајт, види га, ох, то је тамо. Док Б очигледно желите да буде јасно, али можете да га оставите мало више у позадини. Дејвид даје добар пример у овом предавању, што је Бостон Т систем. Када одете у Бостон Т и желите да купите карту, морате да уђу у 5 меније пре него што заиста можете да купите карту за $ 2, $ 2.50 вредности, што је колико је потребно да се вози метроом у једном смеру. То је проблем, јер већина људи који се возите метроом Вероватно само желе да иду на једно место, купите своју карту, добити на одмах. То нема смисла да они морају да иду кроз много различитих менија да се тамо. Боље корисничко искуство ће бити брз дугме на првој страни да само каже, 'купи карту у једном правцу, "и да ће ставити у свим стандарда Подразумеване вредности, а затим, ако неко жели да купи карту другачији него да, они и даље, наравно, имају могућност да, али ви сте оптимизован за заједнички-случај коришћења који је заиста важно. Можете видети примере ово на Фацебоок, зар не? Ако одете на Фацебоок-у и желите да поставите статус, то је право на врху који је оно што често желе да раде. Чим уђете у страницу, можете да урадите најчешћих ствари које желите да урадите. Ако желите да урадите нешто компликованије ствари као, кажем да желим да идем на зиду моје другарице и поставите слику на њему - које ћу желети да често, али не тако често као постављање ажурирања статуса - па у том случају, ја упишите своје име у поље на врху, кликните на свом профилу, а онда, ипак, то је на самом врху било кад сам добио на свом профилу. Опет, ја сам у приоритет оптимизован за случајеве најчешће намене. 

Још једна важна ствар је да често људи ће некако покушати да се око овог говорећи, у реду, тако да сам направио сајт и људи су налаз је збуњујуће, и то је проблем, зар не? Очигледно, ја не желим да људи буду збуњени садржај мог сајта. Али начин да се реши да не би имали нешто поп уп говорећи, хеј, ја ћу вас научити како да користите овај сајт. Корак 1 - кликните на ово дугме. Корак 2 - идите овде. Наравно, то је начин око ње - то је начин на који можете да кажете људима шта да раде, али то је стварно не оптималан начин. Ако ја одем на сајт и одједном сам бомбардовани са овог туторијала који ми говори шта да радим и где да идем и све то, то није забавно за мене. То није добро искуство за мене. То је врста бола. Желим само да почнемо да радимо ствари. Људи ће затворити своје дијалогу, или изаћи из туторијала, не знам шта да радим, а онда се жале због нисте им говори шта да раде. Начин да се реши ово није давањем било какве туторијала или праваца - тако нешто. Онолико колико можете да га избегнете, ви заиста желите да прикажете кориснику шта да радим само по природи како сајт је постављен. Другим речима, ако ја одем на Фацебоок-у без пријављивања, Прва ствар коју видим на главној страници - то је мало пријаву кутија. Дакле, дух. Морам да се пријавим? То је тамо. Док, ако сам отишао на Фацебоок и сам морао да кликнете на малу везу на дну који је рекао "пријавите" и остатак странице је била само нека врста слике или нешто, Не бих баш знао шта да радим, зар не? Ја бих мешати. Дакле, то може да ми каже да идем тамо доле и кликните на дугме да се пријавите, или дневник у дугмету може бити на самом врху где ћу да га видим. Желите да будете у показује кориснику шта да ради, и то треба да буде инхерентан у самом страници. 

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

Сада ћу да причам мало о томе како да управљате веб развојни пројекат. Ми смо прешли како можете да урадите технички бацк-енд страни, како можете да дизајнирате заиста добар сајт, и то је супер, ако радите сами, али - чак и ако радите сами, а нарочито ако радите у тиму, управљање пројектима постаје велики проблем. Некако сте чули о управљању пројектима у различитим облицима од Основна школа када су вам рекли групни рад. Морате да сарађују, комуницирају, све то. То све важи и даље ту, али постоје неке јединствене околности са информатике који желите да буду свесни, а желите да будете сигурни да добро обради. Ја ћу прво мало поразговарамо о тиму који ћете бити унутра Веома је важно да изаберете прави величину тим да се ради на, и у свом завршном пројекту мислим имате опцију да изаберу између 1 и 4 особе ако сам у праву. Ви желите да се уверите да нисте само бирајући број људи да ли желите да радите са јер су твоји пријатељи. Желите да изаберете тим који је добар величине и да ће добити посао. Ту је компромис у има још људи наспрам мање људи. Ако имате више људи, очигледно више посла може да се уради јер имате пуно људи, пуно кода, пуно идеја, и то је све супер. Али то такође захтева много више управљање и много више комуникације. Другим речима, ако имате 4 људи који раде на истом пројекту и они сви уређујете исту шифру, више или мање су сви некако треба да знам шта се дешава тако што је потребно - ако додате неку нову функцију сте некако морати да кажем људима - Ја сам додао ово, Мењам то на овај начин - нарочито ако се у заиста дубоко ствари као модела и контролера који су у ствари иду да утичу како сајт функционише. Цео тим треба да буду свесни тога, тако да је потребно да се уверите да не бирате сувише велики тим који ће то бити тешко да ту комуникацију. Такође, не желе да изаберу мали тим довољно да ти не идеш на бити у стању да комуницирају, јер је то само ви. 

Још једна ствар коју треба размотрити је стање где вештине људи су. То је супер ако си стварно сви добри програмери. Али, ако сте све бацк-енд људе, онда је ваш сајт неће изгледати врло добро јер ви имате ову велику базу података, и то чини супер-брзих упита претраге - што је одлично - али када одете на њега, то је као сајт са 1990-црвене и плаве свуда, а то је било не ваља. Приметимо да је Бен и ја радећи као тим су веома лепо, јер сам некако више у предњем крају, обоје смо у интеракцији у средњем крај, а Бен је стварно добар са бацк-енд ствари, тако да функционише заиста добро, јер можемо дизајн било који сајт и основи рупе у тај сајт који треба да буде испуњен може бити испуњен од стране било кога од нас, или можда оба. Ви желите да се уверите да има у свом тиму нема рупа. У реду је ако има мало преклапања. Другим речима, ако имате 2 особе које су и добро са леђа крај, који може бити добар као и због тога што они могу да помогну једни другима са проблемима да они имају. То може бити проблем ако имате само 1 особу ко је одговоран за одређену ствар и они упасти у проблем, тако да не желим да имам мало преклапања али што је најважније желите да се уверите да све од могућих рупа су попуњена. 

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

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

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

Ја сам раније рекао. Ја ћу рећи поново. Тестери су супер, супер користан. Покушајте да се људи који никада нису видели сајт пре него што се пријавите на и видети шта се дешава јер они могу не само да тестира корисност сајта и корисничко искуство, али они такође могу тестирати функционалност на начин да не можете. Ако направите неку функцију да ради одређене ствари а ви знате да ће то урадити исту ствар исправно сваки пут, то је супер. Али, то често може бити тешко да се објасни угаоним случајевима где корисник може да укуцајте нешто што нисте очекивали - управо зато што је дефинисано карактеристике себе. Дакле, да неко дође по ко нема појма како да користи сајт и да само га разбити у било начина они могу да ураде је заиста корисно јер вам добити идеју из потпуно другачије перспективе онога на вашем сајту се ради и шта треба да се поправи. 

Последња, ја ћу говорити о неким општим добрим праксама, и ви сте видели доста њих у ЦС50, али они такође стварно, стварно применити у окружењу пројекта. Један је коментара. Увек цоммент своју шифру, посебно ако радите на великом тиму. То може бити тако досадан да само имају огромну блок кода који је неко написао и можда ради, можда то није случај, али немате појма шта ради, па ви немате појма да ли је то корисно или не, или да ли би требало да буде тамо или не, и ако радите на нечему другом да је чак могуће да радите на иста ствар, па само да буде веома, веома опрезан да буде разумевања за ваше вршњака и код писања да је добро документовано. Не морате да идете тако далеко да уради целу ствар где се допада ако повећате бројач има коментар који каже, сам додао 1 до овог шалтера. То не мора да буде да је детаљно, али за било коју функцију да сте икада пишете требало би да имају неку документацију о томе шта да ради тачно функција, шта његови улази су, и шта треба да се врате. На тај начин можете да користите друге компоненте људи на сајту и можете да радите у правцу изградње нешто велико. 

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

Још једна корисна ствар коју заиста не мислим да је наведено у веома ЦС50 али вреди улазим је контролом верзија. Идеја контроле верзија је у основи када се праћење свих напретка Ви сте направили ка вашем сајту и ако у било ком тренутку сте схватили, ох, ово је радио пре док, али то не ради више, можете да се вратите на претходне верзије и видети шта се променило од тада и такве ствари. Примарни начин да то урадите је са Гит, а Гит је цела ова врста система који Верујем Томи МацВиллиам дао семинар о прошле године. Ако идете у ЦС50 семинара за 2011, можете видети његов семинар о томе. Идеја је у основи Гит да у редовним интервалима правите ове обавезе који су начина да се каже сајт је у прилично стабилну верзију сада тако Ја сам га горе паковање и слање далеко на сервер, а онда можете да одете на том серверу и погледајте свим претходним верзијама кода и видети како је напредовала и све то некако добрих ствари. Дакле, то је у основи то. Што се тиче веб развој, ми смо срећни да се држимо око и одговори на било питања што се тиче наше презентације. То је то. Хвала. >> [Бен] Хвала. [Аплауз] 

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

[Члан публика] Ако сте били да бира између једног од њих да науче или покупи, што би ти волео? Искрено, мислим да зависи од особе. Жао ми је. Питање је који би сте изабрали за некога да научи? Ја лично наћи Пајтон најлепше. Постоји много људи који су - Јесам мој први пројекат веб дев у Питхон и Дјанго. Постоји много људи који воле Руби он Раилс, такође. Вероватно више људи који знају Руби он Раилс. Искрено, ја бих ићи са било људи око тебе знају тако да имате људе да постављају питања. 

Питање је било - на дељеним серверима то је некако тешко да раде на Питхон? То зависи од вашег хостинг. Постоји број веб домаћини који ће постављати Питхон ствари. Вебфацтион то ради, зар не? Вебфацтион је онај који Били и ја користио за неке пројекте. Они су стварно супер. Они подржавају већину језика. Али истина је да је ПХП је широко подржана много. Дакле, ако сте заглављени на веб хост који само чини ПХП, то је добар разлог да користе ПХП. 

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

[Билли] Нешто бих додати што је само општа ствар је да не осећају као да треба да сте научили све језике смо разговарали из нашег семинара. Очигледно поента је да вам дати идеју о томе шта је тамо, а ако сте заинтригирани било од ствари које смо поменули да можете да их Гоогле- и чита се на њих. И као што сам поменуо, постоји неколико семинара који се баве управо тим стварима. Постоје чак и више семинари које нисам поменуо да вероватно добити у ове ствари као добро. Идеја је да ако желите да радите на нечему, овде су алати на располагању. Не осећају преплављени ако нисте сасвим сигурни шта ови алати раде управо, али знам да су тамо и да можете направити широку употребу од њих Гоогле. 

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

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

Мислим да је о томе, па хвала опет за долазак. Заиста смо уживали разговара са вама и надам се да сте научили неке ствари. [Бен] Ми смо срећни да разговарамо - морамо да идемо, али ми смо срећни да више разговарамо напољу ако имате још једно питање. Хвала још једном. [Аплауз] [ЦС50.ТВ]