1 00:00:00,000 --> 00:00:02,500 [Powered by Google Translate] [Семинар] [Web Development: От идеята до Изпълнение] 2 00:00:02,500 --> 00:00:04,200 [Бен Kuhn] [Billy Janitsch] [Harvard University] 3 00:00:04,200 --> 00:00:07,250 [Това е CS50] [CS50.TV] 4 00:00:07,250 --> 00:00:10,840 [Billy] Здравейте, аз съм Били и това е Бен. >> [Бен] Hi. 5 00:00:10,840 --> 00:00:12,840 Отиваме да се говори за уеб програмиране днес. 6 00:00:12,840 --> 00:00:14,840 [WebDev] [Billy Janitsch и Бен Kuhn] 7 00:00:14,840 --> 00:00:16,840 Малко за нас на първо място. 8 00:00:16,840 --> 00:00:19,590 Бен е нещо обратно края на момчето на. Той прави нещата работят. 9 00:00:19,590 --> 00:00:21,870 И тогава ще отида и да ги направят красиви. 10 00:00:21,870 --> 00:00:26,610 Аз съм до голяма степен ангажирани с по-предния край дизайн оформление такива неща, 11 00:00:26,610 --> 00:00:31,260 и Бен, от друга страна, знае какво прави, така че той работи на гърба в края неща. 12 00:00:31,260 --> 00:00:34,050 Заедно сме направили няколко неща. 13 00:00:34,050 --> 00:00:38,710 Например, миналата година сме работили върху Gimblium който е онлайн студио за разработка на видеоигри. 14 00:00:38,710 --> 00:00:40,400 Това беше последният ни проект за класа, 15 00:00:40,400 --> 00:00:42,780 и от тогава сме направили Harvard Class 16 00:00:42,780 --> 00:00:47,860 която е онлайн рамка за сърфиране и пазаруване курсове в Харвард. 17 00:00:47,860 --> 00:00:53,180 >> Ние ще започнем с тази идея за нашия уебсайт. 18 00:00:53,180 --> 00:00:57,480 Отиваме да направим Facebook, но за котки. 19 00:00:57,480 --> 00:00:59,520 Преди да всъщност правят този сайт, 20 00:00:59,520 --> 00:01:02,520 не правете този сайт, защото това не е добре, но ние ще го използвам като рамка 21 00:01:02,520 --> 00:01:05,349 и да мине през процеса на това как ние приемаме тази идея 22 00:01:05,349 --> 00:01:07,450 и да го превърне в истински сайт можем да използваме. 23 00:01:07,450 --> 00:01:11,940 Ще започнем чрез счупване на интернет страницата надолу. 24 00:01:11,940 --> 00:01:13,190 Както сте били прави в CS50, 25 00:01:13,190 --> 00:01:17,360 искате да се мисли за това какви са реалните компоненти, които излизат в този сайт. 26 00:01:17,360 --> 00:01:21,290 По принцип тя се превръща от идея, която е само нещо като абстрактно понятие 27 00:01:21,290 --> 00:01:23,590 в истинско, осезаемо нещо, което бихте могли да направите. 28 00:01:23,590 --> 00:01:25,910 Започваме като попита някои въпроси. 29 00:01:25,910 --> 00:01:28,070 Какъв е този сайт? Защо се прави това? 30 00:01:28,070 --> 00:01:30,670 Какво е то ще се използва? Такива неща. 31 00:01:30,670 --> 00:01:33,660 В случай на Facebook Cat, 32 00:01:33,660 --> 00:01:37,730 ние основно искате уеб сайт, който позволява на котки социална мрежа помежду си. 33 00:01:37,730 --> 00:01:41,260 Идеята е, че те могат да публикувате на стените на другите, 34 00:01:41,260 --> 00:01:43,510 те могат да правят коментари, че такива неща. 35 00:01:43,510 --> 00:01:46,720 И това е, когато влезем в функционалните компоненти. 36 00:01:46,720 --> 00:01:51,270 Ние сега имаме този вид на рамка на - имаме потребителски профили, 37 00:01:51,270 --> 00:01:53,990 имаме коментари, и ние можем да публикуваме. 38 00:01:53,990 --> 00:01:57,390 Може би някой ден ще влиятелните харесвания и неща от този род. 39 00:01:57,390 --> 00:02:00,410 И ние вид искат да дадат приоритет на тези функции ще инча 40 00:02:00,410 --> 00:02:03,340 Искаме да кажем, като, добре, това е наистина важно, че всеки има профил 41 00:02:03,340 --> 00:02:06,440 и че всеки може да публикува на стени на другия. 42 00:02:06,440 --> 00:02:08,509 Вторично, че коментарите би било хубаво. 43 00:02:08,509 --> 00:02:10,180 Може би по-късно ще влиятелните харесвания. 44 00:02:10,180 --> 00:02:13,700 Така че, вие искате да имате представа за това, което е от основно значение за вашия проект 45 00:02:13,700 --> 00:02:17,260 и това, което е нещо като по-обща функция, която може да бъде приложена по-късно. 46 00:02:17,260 --> 00:02:20,870 Искаш ли някак да има специален списък в ума, 47 00:02:20,870 --> 00:02:24,090 но проектът, който започна с не ще бъде проектът, който завърши с. 48 00:02:24,090 --> 00:02:27,100 С други думи, нещата ще се променят, докато сте на развитие на сайта, 49 00:02:27,100 --> 00:02:30,090 и искате да оставите място за това. 50 00:02:30,090 --> 00:02:34,470 Аз ще го предам на Бен кой ще поговорим малко за структура. 51 00:02:34,470 --> 00:02:39,610 >> [Бен] Отивам да се говори за по-техническата страна на Мрежата за развитие. 52 00:02:39,610 --> 00:02:42,370 Хайде да отидем някои основи на първо място. 53 00:02:42,370 --> 00:02:45,730 Когато правиш уеб приложение, 54 00:02:45,730 --> 00:02:50,470 основната разделението, че ти започваш да трябва да имаш е 55 00:02:50,470 --> 00:02:52,700 ти започваш да има някои неща се случва в страната на клиента - 56 00:02:52,700 --> 00:02:56,700 което означава, че кодът, който сте браузър отнема от сайта 57 00:02:56,700 --> 00:03:01,910 и JavaScript, HTML, CSS неща на. 58 00:03:01,910 --> 00:03:04,490 Това е всичко, от страна на клиента. 59 00:03:04,490 --> 00:03:08,680 Ще има друг код, който работи на сървъра страна 60 00:03:08,680 --> 00:03:10,770 която следи всички данни, които хората изпращат, за да можете, 61 00:03:10,770 --> 00:03:15,060 реши на кого да даде това, което, подобно на тези неща. 62 00:03:15,060 --> 00:03:20,380 Това е просто някакъв терминология, така, че вие, момчета, всички сме запознати с това, за което говорим. 63 00:03:20,380 --> 00:03:28,600 Отвъд това разделение, че е добре да се мисли за вашия уеб приложение от гледна точка на 64 00:03:28,600 --> 00:03:32,500 няколко отделни компоненти. 65 00:03:32,500 --> 00:03:35,270 Когато правиш уеб програмиране 66 00:03:35,270 --> 00:03:41,710 едно от нещата, които винаги трябва да се опитват да направят е да се намали сложност. 67 00:03:41,710 --> 00:03:45,710 Колкото по-сложна е кодът е по-голям шанс има да се правят грешки, 68 00:03:45,710 --> 00:03:47,710 толкова по-трудно е да се промени по-късно. 69 00:03:47,710 --> 00:03:50,140 Така че, ако може да скъса приложението ти в някои отделни функционални области 70 00:03:50,140 --> 00:03:57,640 че ще - и можете да намалите вид на количество на транс-област комуникация - 71 00:03:57,640 --> 00:04:03,530 , който ще ви помогне много в дългосрочен план по отношение на намаляването бъгове. 72 00:04:03,530 --> 00:04:07,950 >> За да бъде бетон, обикновено хората се делят на уеб приложение в - 73 00:04:07,950 --> 00:04:13,190 те са нещо бръмча думи сега, но те все още са полезни. 74 00:04:13,190 --> 00:04:17,940 Може би сте чували хората да говорят за модели, изгледи и контролери. 75 00:04:17,940 --> 00:04:23,210 Моделите са най-актуалните данни, че приложението ти се ще да се справим. 76 00:04:23,210 --> 00:04:28,260 Например, в Cat Facebook, вашите модели ще бъдат - 77 00:04:28,260 --> 00:04:35,340 ще имате модел за подобни постове, и модел за потребителски профили, като тези неща. 78 00:04:35,340 --> 00:04:41,090 Вашите мнения са как ви представим, че данните на потребителите си. 79 00:04:41,090 --> 00:04:46,660 Може да имате един изглед за разглеждане на една длъжност и всички коментари 80 00:04:46,660 --> 00:04:51,720 и различно виждане за вашата стена, която има списък на всички публикации 81 00:04:51,720 --> 00:04:57,170 които са насочени към вас, и различно виждане за вашия News Feed - такива неща. 82 00:04:57,170 --> 00:05:00,610 И накрая, имате контролерите, които са основно, когато хората, които изпращате мнения 83 00:05:00,610 --> 00:05:03,310 и правите актуализации на вашия обратно края на система, 84 00:05:03,310 --> 00:05:06,400 вие нарастване куп броячи, и каквото. 85 00:05:06,400 --> 00:05:07,860 Това са вашите контролери. 86 00:05:07,860 --> 00:05:11,030 >> Аз отивам да се говори най-вече за модели. 87 00:05:11,030 --> 00:05:14,030 Прегледи технически не са толкова трудни и въпросът е повече с тях проектиране 88 00:05:14,030 --> 00:05:22,040 Контрольори ще бъдат специфични за каквото и да сте проектиране. 89 00:05:22,040 --> 00:05:25,220 Но има някои доста общи техники, които можете да използвате 90 00:05:25,220 --> 00:05:30,220 за да направите свои модели по-хубав и по-лесно да се работи с, че аз мисля, че са много полезни. 91 00:05:30,220 --> 00:05:35,860 Това е най-вече ще бъде за това как да се справят с вашите Web Apps данни в хубав начин. 92 00:05:35,860 --> 00:05:40,420 Основните въпроси, с модели 93 00:05:40,420 --> 00:05:44,540 са, че те живеят на клиента и сървъра и трябва да разбера 94 00:05:44,540 --> 00:05:51,170 а) как да ги вземем - всички съответни такива - от сървъра към клиента, 95 00:05:51,170 --> 00:05:53,440 и б) как да ги държи в синхрон. 96 00:05:53,440 --> 00:05:58,700 Вашите потребители ще искат да се направят някои актуализации. 97 00:05:58,700 --> 00:06:00,470 Те ще искат да направят нови мнения. 98 00:06:00,470 --> 00:06:04,800 Те ще искат да харесва неща и неща, ако имате харесвания. 99 00:06:04,800 --> 00:06:11,490 Това са основните технически предизвикателства за справяне с модели. 100 00:06:11,490 --> 00:06:15,680 Първото нещо, което вие ще искате да си зададете е 101 00:06:15,680 --> 00:06:18,420 какви данни отива в настоящия модел и какви заявки се ние ще искате да направите - 102 00:06:18,420 --> 00:06:24,290 това е, как ще да погледнем в моделите? 103 00:06:24,290 --> 00:06:26,940 За Cat вашия Facebook например, 104 00:06:26,940 --> 00:06:31,520 вашия пост ще има един автор, свързани с нея, 105 00:06:31,520 --> 00:06:35,660 някои стена пост текст, и получател на стена пост. 106 00:06:35,660 --> 00:06:38,470 И тогава може да искате да заявка, че в един куп различни начини. 107 00:06:38,470 --> 00:06:42,220 Вие ще искате да погледнете на него от който е написал, което пост, 108 00:06:42,220 --> 00:06:46,620 от които са получили, което публикувате, може би от датата, на която са публикувани. 109 00:06:46,620 --> 00:06:50,340 Но ако ти започваш да го направя по дата, тогава ще трябва да добавите друга област на поста си 110 00:06:50,340 --> 00:06:52,490 от кога точно е публикувал. 111 00:06:52,490 --> 00:07:00,220 Тези два фактора - какви данни, които искате да използвате и как искате да го видите - 112 00:07:00,220 --> 00:07:04,200 трябва да мисля за тях първо, защото те зависят един от друг, 113 00:07:04,200 --> 00:07:08,030 и това ще бъде по-трудно да ги добавите по-късно. 114 00:07:08,030 --> 00:07:12,750 >> Има и други съображения. 115 00:07:12,750 --> 00:07:17,540 Когато си мислиш за това как да се справите с модели на сървъра 116 00:07:17,540 --> 00:07:20,540 какво искате да погледнете е - 117 00:07:20,540 --> 00:07:27,440 Можете основно искаме да направим сървъра толкова просто, колкото е възможно. 118 00:07:29,440 --> 00:07:35,500 Правейки неща от страна на клиента е обикновено много по-бързо, ако можете да го направите единствено на клиента 119 00:07:35,500 --> 00:07:38,230 без да прави каквато и да е молба мрежа. 120 00:07:38,230 --> 00:07:47,860 Идеята е да се направи колкото се може повече от тези запитвания, колкото можете на клиента. 121 00:07:47,860 --> 00:07:51,560 Единственият проблем с това 122 00:07:51,560 --> 00:07:54,160 е, че ако поискате всичките си данни в началото 123 00:07:54,160 --> 00:07:57,160 след това, че ще отнеме много време да се зареди. 124 00:07:57,160 --> 00:08:02,290 Така че, идеята е да се намери златната среда между наличието на достатъчно данни за клиента 125 00:08:02,290 --> 00:08:07,640 което можете да направите голямата част от работата си там, но не само привлекателен всичко наведнъж 126 00:08:07,640 --> 00:08:09,710 така че да получите наистина бавно натоварване пъти в началото. 127 00:08:09,710 --> 00:08:12,610 Например, за вашата котка данни 128 00:08:12,610 --> 00:08:20,340 вие вероятно ще искате да донесе букет от последните постове на стените. 129 00:08:20,340 --> 00:08:23,790 Може би не искате да донесе на всички тях, защото това би могло да се върнем няколко години. 130 00:08:23,790 --> 00:08:25,470 Но вие не искате да ги донесе един по един 131 00:08:25,470 --> 00:08:28,740 защото това би довело до много Натоварването на мрежата. 132 00:08:28,740 --> 00:08:33,620 >> Това е често доста трудно - след като имате вървяща база данни - 133 00:08:33,620 --> 00:08:37,210 това е често доста трудно да промените какви данни имате в нея - 134 00:08:37,210 --> 00:08:40,510 тоест, да добавите нова колона база данни или нещо друго - 135 00:08:40,510 --> 00:08:43,510 така че една добра стратегия е всъщност само за да поддържат много от вашите данни в текстов петно ​​- 136 00:08:43,510 --> 00:08:53,880 на JSON петно ​​- JSON е JavaScript Object Notation - 137 00:08:53,880 --> 00:08:58,330 Причината, че е полезно е така, защото след това можете да добавяте нови свойства 138 00:08:58,330 --> 00:09:01,920 на всички тези JSON петна, без да променяте вашата база данни. 139 00:09:01,920 --> 00:09:06,860 Единственият недостатък на това е, че ако имате един куп полета 140 00:09:06,860 --> 00:09:09,890 , която сте добавили по-късно - като скрит в тази JSON петно ​​- 141 00:09:09,890 --> 00:09:12,850 тогава е по-трудно да ги задава въпроси вътре в базата данни. 142 00:09:12,850 --> 00:09:17,690 Например, ако по-късно - ако сте имали пост на вашия модел, който обсъждахме по-рано 143 00:09:17,690 --> 00:09:25,380 само с автора, получателя и текстът - 144 00:09:25,380 --> 00:09:29,000 Вие също може да имат JSON петно ​​и след това, ако по-късно исках да добавя поле за дата 145 00:09:29,000 --> 00:09:31,000 че не би трябвало да се промени вашата база данни. 146 00:09:31,000 --> 00:09:36,140 Можете просто да добавите дати, за да всички текстови полета. 147 00:09:36,140 --> 00:09:39,640 И тогава вие ще бъдете в състояние да погледнете тези от страна на клиента, 148 00:09:39,640 --> 00:09:42,430 но не би било в състояние да ги заявка на сървъра страна 149 00:09:42,430 --> 00:09:44,430 защото е скрит вътре този текст. 150 00:09:44,430 --> 00:09:49,920 >> Другият въпрос, който искате да се мисли за 151 00:09:49,920 --> 00:09:52,400 е как вашият клиент и вашия сървър ще общуват. 152 00:09:52,400 --> 00:09:56,040 Вие обикновено искате да запазите този толкова просто, колкото е възможно. 153 00:09:56,040 --> 00:10:02,230 Можете просто да имат като Get-ми-това искане за данни, 154 00:10:02,230 --> 00:10:09,140 а се създаде нов обект-а-нещо, и искане за актуализация-на-стар обект. 155 00:10:09,140 --> 00:10:12,930 И всички те ще бъдат различни URL адреси на сървър, който ви - 156 00:10:12,930 --> 00:10:20,030 че браузърът би - можете да използвате AJAX заявки за всички от тях 157 00:10:20,030 --> 00:10:24,000 и или да получите или публикувайте данни. 158 00:10:24,000 --> 00:10:26,600 Отново, за нашата Cat Facebook например, 159 00:10:26,600 --> 00:10:32,350 бихте могли да имат, че URL, за да получите индивидуален пост, 160 00:10:32,350 --> 00:10:39,750 и ще имаш един URL за създаване на нова стена пост 161 00:10:39,750 --> 00:10:45,670 а може би и URL за качването на снимка в профила, подобни неща. 162 00:10:45,670 --> 00:10:51,730 Но отново, че това е предварително да донесе голямата част от вашите данни, така че не е нужно да се запази 163 00:10:51,730 --> 00:10:53,360 вземане на мрежовите заявки. 164 00:10:53,360 --> 00:10:59,030 Поради тази причина, може да не искате да има, че индивидуална заявка получите за една длъжност, 165 00:10:59,030 --> 00:11:03,210 и вместо това просто ще искате една заявка получавате за цялата стена. 166 00:11:03,210 --> 00:11:06,110 И след това, ако се опитвате да се намери баланс, защото - 167 00:11:06,110 --> 00:11:10,970 това е също така ще зависи от вашата кандидатура. 168 00:11:10,970 --> 00:11:13,430 Защото, ако очакваме, че хората имат само 10 или 20 стенни мнения 169 00:11:13,430 --> 00:11:15,430 , че ще се оправи. 170 00:11:15,430 --> 00:11:17,390 Но ако очаквате, че ще има хиляди след това, че искането ще отнеме твърде дълго, 171 00:11:17,390 --> 00:11:23,580 и така може да искате да добавите получите-всички-мнения-тъй като параметър. 172 00:11:23,580 --> 00:11:26,580 >> Поради всички тези вие вероятно ще искате да синхронизирате данни в JSON - 173 00:11:26,580 --> 00:11:29,260 JavaScript Notation Object. 174 00:11:29,260 --> 00:11:34,600 Доста всеки език се занимава с JSON много добре. 175 00:11:34,600 --> 00:11:40,880 JQuery има тази хубава getJSON функция, която ще направи всичко на упорита работа за вас. 176 00:11:40,880 --> 00:11:47,390 И на PHP има и много хубави функции JSON за комуникация. 177 00:11:47,390 --> 00:11:52,660 Така че, това е може би най-добрият формат за изпращане на вашите модели назад и напред. 178 00:11:52,660 --> 00:11:56,570 >> Като пример за това, което сме говорили за толкова далеч, 179 00:11:56,570 --> 00:12:00,520 ето един пример поток за Cat вашия Facebook приложение. 180 00:12:00,520 --> 00:12:07,760 Това започва с вашия браузър иска URL базовата уебсайт. 181 00:12:07,760 --> 00:12:15,470 Сървърът вероятно ще изпрати над статичен HTML и някои JavaScript и CSS. 182 00:12:15,470 --> 00:12:19,170 Това е обикновено най-добре не да се направи някаква оказване на сървъра. 183 00:12:19,170 --> 00:12:23,370 Може би не искате да - 184 00:12:23,370 --> 00:12:28,360 Сървъра не се прави там ще надолу в списъка на стенни мнения 185 00:12:28,360 --> 00:12:31,120 и генериране на някои HTML за всеки един и да изпраща тази свърши. 186 00:12:31,120 --> 00:12:34,960 Това е обикновено най-добре да се направи, че от страна на клиента, защото в противен случай 187 00:12:34,960 --> 00:12:38,580 всеки път, когато искате да ги нарисуваш нещо, което трябва да направите заявка на сървъра. 188 00:12:38,580 --> 00:12:42,450 И това много бързо дава много режийни. 189 00:12:42,450 --> 00:12:47,430 Това е обикновено най-добре просто да се изпраща кораб надолу статичен HTML 190 00:12:47,430 --> 00:12:50,660 и след това се JavaScript и CSS, които ще направя за предоставяне от страна на клиента. 191 00:12:50,660 --> 00:12:56,750 Веднага след като тези неща идва в, 192 00:12:56,750 --> 00:13:03,500 тогава може да има - в JavaScript - можете да правите заявки за данни на стена 193 00:13:03,500 --> 00:13:08,740 и подобни неща, а след това сървърът е основно само прави заявките към базата данни 194 00:13:08,740 --> 00:13:10,740 и проверка на разрешения. 195 00:13:10,740 --> 00:13:16,690 Единственото важно нещо е, че не може да изпрати над някои други потребители стенни мнения 196 00:13:16,690 --> 00:13:19,220 че не ти е позволено да се види. 197 00:13:19,220 --> 00:13:28,050 Тя може да бъде в основата на много тънък слой достъп до вашата база данни, 198 00:13:28,050 --> 00:13:32,820 и тогава всичко на показваща данните - всички възгледи и неща - 199 00:13:32,820 --> 00:13:37,280 тези, които може да се случи във вашия браузър, а след това, когато искате да направите един пост или нещо 200 00:13:37,280 --> 00:13:40,000 Вие трябва само да изпратите нова заявка. 201 00:13:40,000 --> 00:13:45,350 >> Има също така някои модни неща можете да направите в началото на тази. 202 00:13:45,350 --> 00:13:49,550 От гледна точка на по-специфична техническа информация, 203 00:13:49,550 --> 00:13:53,360 развива в обикновен JavaScript може да бъде малко по-болезнено, 204 00:13:53,360 --> 00:13:56,220 така че има някои библиотеки и инструменти, които ще ви помогнат много с това. 205 00:13:56,220 --> 00:14:03,690 Мисля, че всички сте чували за Jquery което прави прави HTML рендиране 206 00:14:03,690 --> 00:14:08,890 и манипулиране на много по-лесно - има много фантазия функции за избледняване и навън, 207 00:14:08,890 --> 00:14:12,020 и правене на Zippy анимации. 208 00:14:12,020 --> 00:14:13,720 Има също така и тази библиотека, наречена Underscore.js. 209 00:14:13,720 --> 00:14:20,760 Тя има много полезни функции за комунални услуги, неща, което може да се очаква да има JavaScript 210 00:14:20,760 --> 00:14:24,740 че наистина doesn't - неща като размесването масив, 211 00:14:24,740 --> 00:14:28,900 премахване на дубликати от списък, или изправяне на списък от списъци. 212 00:14:28,900 --> 00:14:30,900 Това е само една малка примерен код. 213 00:14:30,900 --> 00:14:36,520 Подчертан е един тон от тези хубави функции, които искате вие ​​ще трябва през цялото време. 214 00:14:36,520 --> 00:14:38,840 >> И след това има един по-библиотека, която бих искал да прекарам малко време в 215 00:14:38,840 --> 00:14:44,800 наречен Backbone.js защото Backbone наистина ви помага да се справят с модели от страна на клиента 216 00:14:44,800 --> 00:14:47,210 и голяма част от объркването, което може да предизвика. 217 00:14:47,210 --> 00:14:53,550 Backbone ви дава тази концепция на модели и колекции 218 00:14:53,550 --> 00:14:58,300 в JavaScript, които основно са точно като на JavaScript обекти 219 00:14:58,300 --> 00:15:04,900 в JavaScript масиви, но те са събития, когато се променят свойствата си. 220 00:15:04,900 --> 00:15:09,090 Точно като в JavaScript, можете да имате едно събитие, когато един бутон получава кликнали или нещо 221 00:15:09,090 --> 00:15:14,800 Backbone тези модели и Backbone колекции ще излъчват такива неща 222 00:15:14,800 --> 00:15:17,510 че когато те се променят. 223 00:15:17,510 --> 00:15:22,270 Това означава, че можете просто да напишете нещо като този фрагмент от кода тук - 224 00:15:22,270 --> 00:15:27,530 това се казва, когато добавяте нещо към мнения масива преначертае цялата стена. 225 00:15:27,530 --> 00:15:34,270 И това бих казал, когато брой харесвания пост се променя, 226 00:15:34,270 --> 00:15:38,970 ви уведомява потребителя, че някой харесва тяхното мнение. 227 00:15:38,970 --> 00:15:45,210 Или когато всяко имущество на един пост и промени да преначертае гредата. 228 00:15:45,210 --> 00:15:51,050 Неща като това ще ви спести тонове на сложност, тъй като в противен случай 229 00:15:51,050 --> 00:15:55,440 ако не разполагате с някаква рамка като тази след това всеки път, когато в кода си, че промените 230 00:15:55,440 --> 00:16:04,280 нищо за един пост, ще трябва да се помни, себе си да се обадя на всички правят функциите на 231 00:16:04,280 --> 00:16:07,680 и подобни неща, и ако искате да добавите нещо ново, което се е случило 232 00:16:07,680 --> 00:16:10,680 всеки път, когато промяна на мнение, че ще трябва да мине през всяко място във вашия 233 00:16:10,680 --> 00:16:14,610 код, който сте модифицирали мнение и добави, че нещо ново. 234 00:16:14,610 --> 00:16:21,450 A рамка като това ще премахне много от това между слой комуникация 235 00:16:21,450 --> 00:16:28,280 , което прави кода сложен и трудно да се поддържа. 236 00:16:28,280 --> 00:16:31,170 >> Има малко за изгледи също. 237 00:16:31,170 --> 00:16:35,960 Отивам да напусне голямата част от тази на Били, защото технически не са много трудно. 238 00:16:35,960 --> 00:16:43,540 Използвайте Jquery за вашите мнения. Това е на практика като една необходимост в този момент. 239 00:16:43,540 --> 00:16:46,290 Той просто прави всичко много по-лесно. 240 00:16:46,290 --> 00:16:48,290 Има много библиотеки. 241 00:16:48,290 --> 00:16:49,970 Ако сте сложно потребителски интерфейс елементи 242 00:16:49,970 --> 00:16:57,250 ако искате автоматично довършване нещо или като един от тези фантастични мулти-селектори - 243 00:16:57,250 --> 00:17:04,790 ако искате нещо подобно, вероятно ще трябва просто да се търси около 244 00:17:04,790 --> 00:17:08,130 и можете да се намери добър библиотека, която ще направи това, което искате. 245 00:17:08,130 --> 00:17:11,579 Били ще обясни повече за действително трудните части на мнения. 246 00:17:11,579 --> 00:17:17,530 Също така, като страничен бележка, Backbone има някои функции за вземане на преглеждания комуникират 247 00:17:17,530 --> 00:17:22,800 добре с модели - поглед към документацията за всички тези библиотеки, всъщност. 248 00:17:22,800 --> 00:17:28,270 Само погледнете Документи. Те са много добре написани и лесно да се следват. 249 00:17:28,270 --> 00:17:33,890 Като цяло, можете да хубав много просто в Google, ако имате проблеми. 250 00:17:33,890 --> 00:17:36,370 Има много хора, които ги използват. 251 00:17:36,370 --> 00:17:42,020 Мисля, че това е като последна бележка. 252 00:17:42,020 --> 00:17:48,770 >> Има и някои по-съвременни неща, които можете да направите, 253 00:17:48,770 --> 00:17:53,400 ако търсите да направите вашия уеб ап допълнително страхотно. 254 00:17:53,400 --> 00:17:59,760 Можете да го направите - новата спецификация HTML5 има много хубави неща, които можете да направите. 255 00:17:59,760 --> 00:18:05,780 Локално съхранение - което е, че може да съхранява данни в браузъра - 256 00:18:05,780 --> 00:18:09,470 а не да се налага да се върна и да чета на сървъра за всичко, 257 00:18:09,470 --> 00:18:12,470 можете да запазите някои от тях на клиента и че дори позволява на хората - 258 00:18:12,470 --> 00:18:20,850 в някои случаи може дори да ви позволи да използвате уеб страница офлайн. 259 00:18:20,850 --> 00:18:26,980 Има едно нещо, наречено WebSockets които са различен вид на комуникацията в мрежата 260 00:18:26,980 --> 00:18:30,930 където вместо просто да се направи една заявка, можете да получите отговор и сте готови, 261 00:18:30,930 --> 00:18:35,240 продължаваш да отворите връзка към сървъра и за да можете да правите неща, като 262 00:18:35,240 --> 00:18:37,240 актуализации в реално време. 263 00:18:37,240 --> 00:18:42,020 Така че, ако сте се опитвали да направите чат приложение, бихте могли да използвате WebSockets 264 00:18:42,020 --> 00:18:43,790 да общуват назад и напред, така че не би трябвало да се запази с искане, 265 00:18:43,790 --> 00:18:48,410 "О, сървър, е някой да ми изпратите чат?" на всеки 10 секунди или нещо такова. 266 00:18:48,410 --> 00:18:55,620 Има и един интересен HTML5 функция, където можете да го правят да изглежда като 267 00:18:55,620 --> 00:18:58,340 на URL адреса на страницата се променя, без да се налага да всъщност го презареди. 268 00:18:58,340 --> 00:19:03,230 Можете да използвате назад и напред бутони, без да прави един куп на мрежовите заявки. 269 00:19:03,230 --> 00:19:14,660 Неща като това е наистина полезно от гледна точка на което го прави бързо, но също така работи като уеб приложение трябва. 270 00:19:14,660 --> 00:19:17,680 >> Има също така и това нещо, наречено CoffeeScript. 271 00:19:17,680 --> 00:19:24,450 CoffeeScript е на различен език, всъщност, че компилира до JavaScript. 272 00:19:24,450 --> 00:19:30,080 Можете да напишете всичките си код в CoffeeScript, и след това да стартирате този компилатор, 273 00:19:30,080 --> 00:19:33,300 и го изплюва файл с JavaScript, които можете да включите във вашата уеб страница. 274 00:19:33,300 --> 00:19:38,860 Причината, поради която CoffeeScript е хубаво е, защото тя се отървава от много от 275 00:19:38,860 --> 00:19:44,760 странни случаи, че JavaScript има където се равнява на равни, 276 00:19:44,760 --> 00:19:51,130 и се равнява на равни правят различни неща, или искали - 277 00:19:51,130 --> 00:19:55,740 той има по-хубав синтаксис за справяне с масиви и функции. 278 00:19:55,740 --> 00:20:00,460 Това е една малка програмка на CoffeeScript която произвежда списък на всички квадрати 279 00:20:00,460 --> 00:20:04,900 от 10 ^ 2 към 1 ^ 2 в обратен ред. 280 00:20:04,900 --> 00:20:08,410 Както можете да видите, CoffeeScript често ви позволява да изразя в една линия 281 00:20:08,410 --> 00:20:10,890 това, което ще отнеме пет линии на JavaScript. 282 00:20:10,890 --> 00:20:13,230 Той може да направи нещата много по-лесно. 283 00:20:13,230 --> 00:20:15,390 Това е малко на нов синтаксис за да научите най-първо, 284 00:20:15,390 --> 00:20:18,010 но определено ще ви направи по-продуктивни в дългосрочен план. 285 00:20:18,010 --> 00:20:22,050 >> Можете да използвате и други езици на сървъра от PHP - 286 00:20:22,050 --> 00:20:27,570 езици като Ruby, Python, или има дори проект, наречен node.js 287 00:20:27,570 --> 00:20:31,450 , които ще ви позволи да използвате JavaScript в сървъра. 288 00:20:31,450 --> 00:20:34,700 Лично аз наистина, наистина мразя PHP. 289 00:20:34,700 --> 00:20:38,310 Просто не ми харесва да работя с него. 290 00:20:38,310 --> 00:20:43,450 Ако вие също мисля, че това е ужасно cluge на даден език, 291 00:20:43,450 --> 00:20:46,160 След това можете да използвате един от тях вместо това. 292 00:20:46,160 --> 00:20:54,780 По принцип, ако искате да направите нещо и вие наистина не знам как да го направя, 293 00:20:54,780 --> 00:20:56,780 просто търсене в Интернет. 294 00:20:56,780 --> 00:20:59,990 Има тон и тона на ресурси, особено по - 295 00:20:59,990 --> 00:21:03,260 StackOverflow е страхотно. 296 00:21:03,260 --> 00:21:06,400 Това е този сайт, където програмисти да си задават въпроси. 297 00:21:06,400 --> 00:21:09,690 Може би сте се сблъскате с него, ако сте имали проблеми на CS50 проблемните комплекти. 298 00:21:09,690 --> 00:21:16,820 И там са тона на библиотеки за правене на почти всичко, което бихте искали. 299 00:21:16,820 --> 00:21:21,710 Ако искате да направите нещо и не знаете как да го направя, 300 00:21:21,710 --> 00:21:23,710 Не смятайте, че това е невъзможно. 301 00:21:23,710 --> 00:21:26,160 Просто се оглеждам и може да намерите някои добри ресурси. 302 00:21:26,160 --> 00:21:29,280 >> Като цяло приключи, 303 00:21:29,280 --> 00:21:33,650 основните храна за вкъщи са да опростим нещата. 304 00:21:33,650 --> 00:21:36,010 Колкото по-сложна вашия код е в началото 305 00:21:36,010 --> 00:21:40,370 и толкова повече ще се опитам да направя фантазия неща, 306 00:21:40,370 --> 00:21:43,300 колкото по-дълго тя ще предприеме, за да се получи нещо наистина функционално 307 00:21:43,300 --> 00:21:46,480 и толкова по-трудно е да се промени по-късно. 308 00:21:46,480 --> 00:21:49,580 Така че, направете нещата по тъп, лесния начин на първо място. 309 00:21:49,580 --> 00:21:51,720 За да отидете заедно с тази, 310 00:21:51,720 --> 00:21:59,070 Не се страхувай от изхвърлите стария код или почистване много. 311 00:21:59,070 --> 00:22:05,320 По принцип, след като всъщност имат нещо работа, 312 00:22:05,320 --> 00:22:09,640 това е много по-лесно да си помисля, отколкото, когато сте все още в началните етапи 313 00:22:09,640 --> 00:22:12,610 за това как мога да постави всичко това заедно. 314 00:22:12,610 --> 00:22:17,500 Това е най-добре да се направи възможно най-тъпото дизайн, който работи 315 00:22:17,500 --> 00:22:22,270 и след това я подобрим итеративно отколкото да се опитвате да получите всичко, от първия път. 316 00:22:22,270 --> 00:22:28,330 От гледна точка на клиент-сървър разделение, да запазят преднината си на сървъра много проста - 317 00:22:28,330 --> 00:22:33,030 само на база данни и някои удостоверяване и не вършат никаква тежка работа там. 318 00:22:33,030 --> 00:22:37,540 Направете всичките си сложен неща от страна на клиента в браузъра 319 00:22:37,540 --> 00:22:40,650 в JavaScript толкова, колкото можете. 320 00:22:40,650 --> 00:22:43,420 Огледайте се за библиотеки, които правят живота ви по-добре. 321 00:22:43,420 --> 00:22:46,850 Винаги по-добре да се използва код, че някой друг е написал 322 00:22:46,850 --> 00:22:49,850 Ако сте - а не да го напиша сам. 323 00:22:49,850 --> 00:22:57,560 Има много неща в Интернет. Google е най-добрият ти приятел. 324 00:22:57,560 --> 00:22:59,560 Google е най-добрият приятел на програмиста. 325 00:22:59,560 --> 00:23:07,620 Да, определено не се страхувайте да се огледам за такива неща. 326 00:23:07,620 --> 00:23:11,860 Добре. И с течение на Били. 327 00:23:11,860 --> 00:23:14,600 >> [Billy] Всъщност, преди да започнете с някои дизайн неща, 328 00:23:14,600 --> 00:23:17,250 Някой има ли някакви въпроси към Ben за всичко, което той говори за? 329 00:23:17,250 --> 00:23:20,290 Добре, добре. 330 00:23:20,290 --> 00:23:22,220 Отново, уведомете ни, ако нищо не е ясно 331 00:23:22,220 --> 00:23:25,420 или ако искате да отидете за нещо малко повече. 332 00:23:25,420 --> 00:23:30,330 Отивам да се върнем назад малко и да се говори за по-основните части на дизайн. 333 00:23:30,330 --> 00:23:34,840 Бен спомена модел, наречен - Съжалявам, модел оглед контролер система 334 00:23:34,840 --> 00:23:38,520 която е нещо като технически аспект, за да мога да ходя да гледам гледка конкретно, 335 00:23:38,520 --> 00:23:42,930 и аз отивам да се започне с това как ще се изработи мнение, че изглежда добре. 336 00:23:42,930 --> 00:23:50,540 Тук е нещо наистина основния шаблон за нашия Cat Facebook. 337 00:23:50,540 --> 00:23:54,190 Мисля, че има някои основи в съвременния дизайн на потребителския интерфейс 338 00:23:54,190 --> 00:23:56,190 че си струва бране. 339 00:23:56,190 --> 00:23:58,210 Можете да забележите, че има много празно пространство по цялата страница, 340 00:23:58,210 --> 00:24:00,790 достатъчно място за всичко. 341 00:24:00,790 --> 00:24:02,580 Не се чувствам като трябва да смачка всичко в една страница. 342 00:24:02,580 --> 00:24:06,700 Вие искате да оставите много място отворен, и ако отидете в почти всеки съвременен сайт 343 00:24:06,700 --> 00:24:08,380 ще видите, че има бяло навсякъде. 344 00:24:08,380 --> 00:24:10,380 Има бяло на места, не бихте очаквали. 345 00:24:10,380 --> 00:24:14,570 Имате тази цветова палитра, а това е мъдър в началото 346 00:24:14,570 --> 00:24:17,880 да изберете цветова палитра, че започваш да се работи с и развива. 347 00:24:17,880 --> 00:24:22,250 Можете също така - тя помага да изберете шрифт, и по този начин сте сортиране на работа с 348 00:24:22,250 --> 00:24:24,450 тези бетонни основи на конструирането. 349 00:24:24,450 --> 00:24:26,910 Имате си вид, имате си цветове, и след това можете да вид 350 00:24:26,910 --> 00:24:29,380 поберат всичко останало в колкото е необходимо. 351 00:24:29,380 --> 00:24:37,710 Така че, както казах, с цветова схема, която искате да използвате по-смели цветове на цветова схема 352 00:24:37,710 --> 00:24:40,320 пестеливо. Headers са приятни. Бутоните са хубаво да има наистина големи, лъскави цветове. 353 00:24:40,320 --> 00:24:43,710 Но като цяло, ако имате уеб сайт, който има цветове навсякъде, 354 00:24:43,710 --> 00:24:47,250 всичко, което се взираше в лицето, той просто изглежда претрупана, и то не е добро. 355 00:24:47,250 --> 00:24:50,430 Вие искате да обикновено използват светли цветове. 356 00:24:50,430 --> 00:24:52,890 Опитайте се да, отново, вземете доста последователна цветова схема. 357 00:24:52,890 --> 00:24:56,640 Можете да имате тези малки пръски от много цвят - 358 00:24:56,640 --> 00:25:00,240 че може да изглежда доста приятно, но вие искате да ги използвате доста пестеливо. 359 00:25:00,240 --> 00:25:04,270 >> Както казах, вие искате да бъде минимално. По-малко е почти винаги повече. 360 00:25:04,270 --> 00:25:07,430 Ако можете да покажете нещо или не покаже нещо, 361 00:25:07,430 --> 00:25:10,230 а ти си вид сигурни дали той трябва да бъде там по подразбиране - 362 00:25:10,230 --> 00:25:13,400 Вероятно вие сте най-добре да го оставя настрана. Винаги можете да го добавите в по-късно. 363 00:25:13,400 --> 00:25:16,620 Да, да опростим нещата. 364 00:25:16,620 --> 00:25:19,510 Но най-важното е, че можете да искате да разгледа множество проекти. 365 00:25:19,510 --> 00:25:23,520 Не мислете, че когато правите сайт, можете да го имате в главата си, че ти започваш да се 366 00:25:23,520 --> 00:25:26,310 направи сайта по определен начин, и то ще изглежда точно по този начин. 367 00:25:26,310 --> 00:25:29,830 Това ще има син заглавката на върха и синия страничен бар 368 00:25:29,830 --> 00:25:32,670 и след това нещо в жълто под-заглавието. 369 00:25:32,670 --> 00:25:34,670 Вие искате да направите множество шаблони. 370 00:25:34,670 --> 00:25:37,350 Можете или - ако сте добре с Photo Shop, можете да отворите този и вид 371 00:25:37,350 --> 00:25:39,600 дизайн на уеб сайт, както искате да изглежда. 372 00:25:39,600 --> 00:25:41,680 Ако не, можете просто да използвате писалка и хартия, 373 00:25:41,680 --> 00:25:44,000 но изравям множество дизайни. 374 00:25:44,000 --> 00:25:47,000 Вие искате да има в основата си създаде, където имате много различни дизайни, 375 00:25:47,000 --> 00:25:50,810 и ако някой се озовава работи, то това е страхотно. 376 00:25:50,810 --> 00:25:53,370 Ако някой се озовава при липса, тогава винаги има още един, за да се обърнат. 377 00:25:53,370 --> 00:25:57,960 Като цяло, не се чувствам като теб трябва да бъде ограничена 378 00:25:57,960 --> 00:26:00,830 какъвто и да е дизайн ви първоначално да вземе решение за. 379 00:26:00,830 --> 00:26:04,420 Дизайни са много променливи, и част от значението на модела 380 00:26:04,420 --> 00:26:09,480 оглед контролер система е, че можете да сменяте и излизат различни гледни точки, които искате. 381 00:26:09,480 --> 00:26:13,510 Можете да се развявам данните по един начин, и след това да реши, о, всъщност, че не работи толкова добре. 382 00:26:13,510 --> 00:26:19,190 Мисля, че това е нещо прекалено сложно или има част тук, че всъщност не е работа, 383 00:26:19,190 --> 00:26:22,150 така че аз съм просто ще се откаже напълно това виждане и суап в съвсем нова. 384 00:26:22,150 --> 00:26:24,790 Все още можем да използваме старите модели и старите контролери. 385 00:26:24,790 --> 00:26:27,490 Ние можем да направим всичко на сървъра и клиента, както бихме преди. 386 00:26:27,490 --> 00:26:32,850 Но действителната вълна на данните като показва ще бъде малко по-различен. 387 00:26:32,850 --> 00:26:35,840 >> Що се отнася до действително изпълнение на дизайна, който искате, 388 00:26:35,840 --> 00:26:39,330 След като вече имате няколко дизайни скицираме на хартиен или Photo Shop или каквото и да, 389 00:26:39,330 --> 00:26:42,120 има редица инструменти, които са направени достъпни за вас. 390 00:26:42,120 --> 00:26:45,700 Първият сте много добре запознати с който е вашият HTML, PHP, или каквото и 391 00:26:45,700 --> 00:26:48,990 език, който използвате само за кодирането на статични страници на вашия сайт. 392 00:26:48,990 --> 00:26:51,990 Вие сте работили много с HTML какъв вид ви дава тези тагове 393 00:26:51,990 --> 00:26:57,820 че можете да сложите нещата в, и в общи линии това е начин за организиране на вашето съдържание. 394 00:26:57,820 --> 00:27:00,990 Например, вие имате заглавката до там, така че ти започваш да имат етикет с глава, 395 00:27:00,990 --> 00:27:05,770 и то се случва да има някакъв текст вътре в него, която вероятно ще бъде в друг маркер. 396 00:27:05,770 --> 00:27:08,380 След това имате на страничната лента може би с няколко различни връзки, 397 00:27:08,380 --> 00:27:10,160 и тези, които ще си бъдат отделни тагове. 398 00:27:10,160 --> 00:27:13,870 Така че, в общи линии HTML в сърцето му е начин на разделяне на страницата как 399 00:27:13,870 --> 00:27:16,980 в крайна сметка искате да го форматирате. 400 00:27:16,980 --> 00:27:18,980 Така че отново, което сте виждали преди. 401 00:27:18,980 --> 00:27:20,540 Ти си доста комфортно с работа с него сега 402 00:27:20,540 --> 00:27:23,120 имайки предвид, че сте направили последния PSET надяваме, 403 00:27:23,120 --> 00:27:26,150 така че не трябва да бъде проблем. 404 00:27:26,150 --> 00:27:31,280 >> След това имате CSS, които основно се занимава с всички аспекти на дизайна статични. 405 00:27:31,280 --> 00:27:35,320 Това ще се справят с всички на цветовете, всички на позиционирането на различни елементи, 406 00:27:35,320 --> 00:27:36,840 където и да отидат с уважение един към друг, 407 00:27:36,840 --> 00:27:41,530 колко големи са те, различните видове позиционирания, че ще имат - 408 00:27:41,530 --> 00:27:46,030 С други думи, можете да имате неща фиксирани, така че, когато превъртате надолу те останат, 409 00:27:46,030 --> 00:27:48,700 или може да има неща, в сравнение с други елементи. 410 00:27:48,700 --> 00:27:50,730 Всички такива неща е в CSS. 411 00:27:50,730 --> 00:27:54,630 Освен това, можете да направите различни декорации, можете да имате текстови цветове, 412 00:27:54,630 --> 00:27:56,630 текстови ефекти, като всички такива неща. 413 00:27:56,630 --> 00:28:00,360 Бен даде един наистина добър семинар по този миналия уикенд, 414 00:28:00,360 --> 00:28:04,450 и така аз определено ще покажат, че, ако имате намерение да се прави някои модни неща с CSS. 415 00:28:04,450 --> 00:28:09,850 CSS3 всъщност е най-новата версия на CSS, и той може да направи всякакви наистина хубави неща. 416 00:28:09,850 --> 00:28:14,750 Той може да направи градиенти; можете да имате приятни, заоблени ъгли, можете да направите всякакви неща 417 00:28:14,750 --> 00:28:17,940 за да направите вашия сайт изглежда по-модерен и луксозен. 418 00:28:17,940 --> 00:28:22,150 >> Следващият инструмент е JavaScript и JQuery които Ben говорихме малко за това, 419 00:28:22,150 --> 00:28:24,150 но аз ще се получи малко по-навътре. 420 00:28:24,150 --> 00:28:28,100 JavaScript, като сте работили с него малко, или поне да се види, че в лекция, 421 00:28:28,100 --> 00:28:31,870 е един вид начин на динамично правиш неща в HTML. 422 00:28:31,870 --> 00:28:35,950 HTML, както знаете, е статично, така че след като имате HTML не можете да го промените. 423 00:28:35,950 --> 00:28:40,050 Но JavaScript, в някои отношения, е начин да бъде в състояние да променя HTML. 424 00:28:40,050 --> 00:28:44,520 Така че можете да направите това, и това е страхотно, но JavaScript наистина е болка да се работи. 425 00:28:44,520 --> 00:28:49,050 Това е толкова дълго и тъп и да се направи дори и най-простите неща 426 00:28:49,050 --> 00:28:51,630 изисква много линии на JavaScript. 427 00:28:51,630 --> 00:28:55,410 Така че, Jquery е в основата на библиотека за JavaScript, който опростява всичко това. 428 00:28:55,410 --> 00:28:59,880 Той казва, окей, ако искате да имате една квадратна кутия идват от ляво 429 00:28:59,880 --> 00:29:03,980 и избледняват в страницата, така че да е в средата, в JavaScript, който ще вземе - 430 00:29:03,980 --> 00:29:06,340 Аз не знам, сто линии, за да се направи, и то ще бъде болка, 431 00:29:06,340 --> 00:29:10,540 и излезе от него мрази всичко за уеб програмиране. 432 00:29:10,540 --> 00:29:15,380 JQuery Можете основно имат елемент-дот-избледняват-в, или нещо подобно. 433 00:29:15,380 --> 00:29:18,580 Така че, много, много прости функции, които ще ви позволи да направите всички видове готини анимации 434 00:29:18,580 --> 00:29:20,580 и неща от този род. 435 00:29:20,580 --> 00:29:23,300 Другото нещо, което тези две са наистина добри за е просто правиш динамични неща 436 00:29:23,300 --> 00:29:25,300 с уебсайта. 437 00:29:25,300 --> 00:29:28,370 Така че, вместо просто като си HTML страница - което показва някои данни, но всъщност не 438 00:29:28,370 --> 00:29:32,130 направи нищо - JavaScript и JQuery ще ви позволи да има бутони, които можете да кликнете върху, 439 00:29:32,130 --> 00:29:37,960 и можете да плъзгате елементи и повторно да ги поръчате и да ги сортирате, и имаме нови елементи 440 00:29:37,960 --> 00:29:40,500 добавяне или премахване. Можете да добавите-изтриване, такива неща. 441 00:29:40,500 --> 00:29:44,570 Така че, JQuery прави тон на готини неща. 442 00:29:44,570 --> 00:29:48,840 И Vipul всъщност дава семинар за него днес, според мен, при 5-часа, 443 00:29:48,840 --> 00:29:51,220 така че ако можете да си наоколо за толкова дълго, че би - 5 или 4? 444 00:29:51,220 --> 00:29:54,930 Four. Извинете. Всъщност е точно след това, така че аз бих препоръчал 445 00:29:54,930 --> 00:29:56,680 залепване наоколо за него, ако можете. 446 00:29:56,680 --> 00:30:00,180 JQuery е супер, супер полезно, и вие ще бъдете в състояние да направи много наистина хубави неща с него 447 00:30:00,180 --> 00:30:03,460 за почти всеки проект, уеб програмиране. 448 00:30:03,460 --> 00:30:06,200 >> Сега аз ще отида в нещо като отличие. 449 00:30:06,200 --> 00:30:08,210 Говорил съм основно за потребителски интерфейс. 450 00:30:08,210 --> 00:30:11,510 Потребителски интерфейс е само дизайна на сайта. 451 00:30:11,510 --> 00:30:13,780 Но има и нещо друго понятие, което е потребителски опит. 452 00:30:13,780 --> 00:30:15,900 Двамата са много различни. 453 00:30:15,900 --> 00:30:19,440 Interface определено е част от преживяването. 454 00:30:19,440 --> 00:30:21,340 С други думи, когато отидете на сайта, можете да потърсите в интерфейса. 455 00:30:21,340 --> 00:30:22,960 Това е част от начина, по който се насладете на сайта. 456 00:30:22,960 --> 00:30:24,960 Но потребителски опит е повече от това. 457 00:30:24,960 --> 00:30:29,910 Потребителят е опит за това какво е впечатлението, че потребителят получава от вашия сайт. 458 00:30:29,910 --> 00:30:31,910 Така че, очевидно, интерфейс е част от това. 459 00:30:31,910 --> 00:30:35,340 И това определено е необходима част, но това не е достатъчно. 460 00:30:35,340 --> 00:30:38,790 С други думи, ако имате приятен интерфейс, и това е красива и пъстра и всичко това, 461 00:30:38,790 --> 00:30:43,650 това е страхотно, но ако потребителят отива към вашия сайт, вижда доста оформление и е объркан от 462 00:30:43,650 --> 00:30:47,060 всичко, няма никаква представа как да се направи нещо, тогава явно сте направили наистина 463 00:30:47,060 --> 00:30:48,930 лошо уебсайт. 464 00:30:48,930 --> 00:30:50,930 Това е нещо, където потребителят опит идва инча 465 00:30:50,930 --> 00:30:54,570 Отивам да поговорим малко за UX дизайн - UX е съкратено от потребителски опит - 466 00:30:54,570 --> 00:30:58,050 и вид на това как можете да се уверите, че имате добър потребителски опит. 467 00:30:58,050 --> 00:31:04,330 Първата точка е, че вие ​​може да се изработи уеб сайт, където потребителят може да прави нищо, което 468 00:31:04,330 --> 00:31:06,820 че потребителят вероятно иска. 469 00:31:06,820 --> 00:31:08,940 Но ако потребителят не мога да разбера как да правя тези неща - 470 00:31:08,940 --> 00:31:12,850 с други думи, ако потребителят не разполага с добра идея, когато те отиват към вашия сайт на, 471 00:31:12,850 --> 00:31:17,660 "О, ако искам да обновя моя профил, тогава щракнете върху този бутон, или ако искате да публикувате на 472 00:31:17,660 --> 00:31:20,850 нечия стена, тогава ще отида да им стена и кликнете върху малка кутия. " 473 00:31:20,850 --> 00:31:24,410 Ако потребителят не знае, че след това можете ефективно да имате всъщност не 474 00:31:24,410 --> 00:31:27,080 реализира тази функционалност правилно. 475 00:31:27,080 --> 00:31:30,900 Част от прилагането на функционалност е, че потребителите са в състояние действително да го използвам. 476 00:31:30,900 --> 00:31:34,810 И това може да бъде разочароващ - може да направи един сайт, и той може да направи всички видове 477 00:31:34,810 --> 00:31:37,810 прекрасни неща, но след това ще имате хора го тестват и да кажат: "Това не мога да направя това. 478 00:31:37,810 --> 00:31:39,770 Защо не мога да го направя това? "И ще кажа, обратно към тях, 479 00:31:39,770 --> 00:31:44,420 "Е, той може да. Просто трябва да отидат в седмия падащото меню по този неясен 480 00:31:44,420 --> 00:31:48,470 страница, която само се намира чрез линк в долния десен ъгъл ръка "или нещо такова. 481 00:31:48,470 --> 00:31:50,430 Очевидно е, че вие ​​не искате това. 482 00:31:50,430 --> 00:31:53,420 Вие искате да бъде ясно на потребителите си това, което трябваше да направя, 483 00:31:53,420 --> 00:31:56,240 и тя трябва да бъде проста и интуитивна за тях. 484 00:31:56,240 --> 00:32:01,180 >> Друго нещо, което искате да се опитаме да направим е, че ако някой ще ходи да отидете на вашия сайт 485 00:32:01,180 --> 00:32:05,520 и 9 от 10 пъти вършат действие A, и един от 10 пъти вършат действия B, 486 00:32:05,520 --> 00:32:08,950 вие може би искате да се съсредоточи своя опит относно действията A. 487 00:32:08,950 --> 00:32:12,240 С други думи, вие искате да го направите много, много ясно как да се направи А. 488 00:32:12,240 --> 00:32:15,980 A трябва да бъде пред-и-център - отидете на сайта, да го видя, о, това е точно там. 489 00:32:15,980 --> 00:32:20,850 Като има предвид, B очевидно искате да бъде ясна, но можете да го оставите малко повече 490 00:32:20,850 --> 00:32:22,850 във фонов режим. 491 00:32:22,850 --> 00:32:24,640 David дава добър пример за това в лекция, 492 00:32:24,640 --> 00:32:26,640 който е системата Бостън T. 493 00:32:26,640 --> 00:32:29,440 Когато отидете до Бостън T и искате да си купите билет, 494 00:32:29,440 --> 00:32:32,700 вие трябва да получите в пет менюта, преди всъщност можете да закупите един билет 495 00:32:32,700 --> 00:32:37,130 за стойност $ 2, $ 2.50, което е колко е необходимо да се вози в метрото 496 00:32:37,130 --> 00:32:39,130 в една посока. 497 00:32:39,130 --> 00:32:41,600 Това е проблем, защото повечето хора, които са езда метрото 498 00:32:41,600 --> 00:32:44,880 вероятно просто искам да отида до едно място, да си купят билет, се кача на веднага. 499 00:32:44,880 --> 00:32:47,550 То няма смисъл, че те трябва да мине през много различни менюта 500 00:32:47,550 --> 00:32:49,550 да стигнем до там. 501 00:32:49,550 --> 00:32:51,760 А по-добър потребителски опит ще бъде бърз бутон на първа страница 502 00:32:51,760 --> 00:32:54,760 че просто казва, "си купи еднопосочен билет", и че ще постави във всички на стандарта 503 00:32:54,760 --> 00:32:58,550 стойностите по подразбиране, и след това, ако някой иска да си купи билет различна от тази, 504 00:32:58,550 --> 00:33:01,690 те все още, разбира се, имате възможност да, но сте оптимизиран за 505 00:33:01,690 --> 00:33:04,080 При обща употреба, което е наистина важно. 506 00:33:04,080 --> 00:33:06,830 Можете да видите примери за това на Facebook, нали? 507 00:33:06,830 --> 00:33:09,410 Ако отидете на Facebook и искате да публикувате статус, 508 00:33:09,410 --> 00:33:11,710 това е точно в горната част, което е това, което често искам да правя. 509 00:33:11,710 --> 00:33:14,730 Веднага след като влезете в страницата, можете да направите най-честите неща, които 510 00:33:14,730 --> 00:33:16,730 което искате да направите. 511 00:33:16,730 --> 00:33:17,550 Ако искате да направите малко по-сложни неща като: 512 00:33:17,550 --> 00:33:21,070 кажа, че искам да отида в стената на моя приятел и да публикувате снимка на нея - 513 00:33:21,070 --> 00:33:24,810 което аз ще искам да правя често, но не толкова често, колкото да публикувате статуси - 514 00:33:24,810 --> 00:33:28,200 така че в този случай, аз напишете името си в полето в горната част, кликнете върху техния профил, 515 00:33:28,200 --> 00:33:31,680 и след това, все още, това е точно на върха там веднъж съм намерила до техния профил. 516 00:33:31,680 --> 00:33:38,240 Отново, аз съм оптимизирана в приоритет за случаите на най-честата употреба. 517 00:33:38,240 --> 00:33:41,800 >> Друго важно нещо е, че често хората някак ще се опитат да се получи около това 518 00:33:41,800 --> 00:33:44,890 като казва, добре, така че аз съм направил сайта и хората намират, че е объркващо, 519 00:33:44,890 --> 00:33:46,110 и това е проблем, нали? 520 00:33:46,110 --> 00:33:49,210 Очевидно е, че не искате хората да се объркат от съдържанието на сайта си. 521 00:33:49,210 --> 00:33:53,210 Но начина, по който да се реши, че не трябва да има нещо, което се появи като каза, 522 00:33:53,210 --> 00:33:55,290 ей, аз ще ви научи как да използвате този сайт. 523 00:33:55,290 --> 00:33:58,130 Стъпка 1 - щракнете върху този бутон. Стъпка 2 - отидете тук. 524 00:33:58,130 --> 00:34:03,080 Разбира се, това е начин около него - това е един начин, по който можете да кажете на хората какво да правят, но това е 525 00:34:03,080 --> 00:34:05,080 Наистина не оптимален начин. 526 00:34:05,080 --> 00:34:07,420 Ако отидете на уеб сайт и изведнъж аз съм бомбардирани с този урок, който ми казва, 527 00:34:07,420 --> 00:34:11,739 какво да правя и къде да отида и всичко това, че не е забавно за мен. 528 00:34:11,739 --> 00:34:13,739 Това не е добър опит за мен. 529 00:34:13,739 --> 00:34:17,130 Това е нещо като болка. Искам просто да започнете да правите неща. 530 00:34:17,130 --> 00:34:19,449 Хората ще се затвори от диалоговия си кутия, 531 00:34:19,449 --> 00:34:23,580 или излез на самоучителя, не знам какво да правя, и след това се оплакват, защото 532 00:34:23,580 --> 00:34:25,580 Вие не сте им казва какво да правят. 533 00:34:25,580 --> 00:34:29,530 Начинът, по който да се реши този не е като даде всякакъв вид урок или направления - 534 00:34:29,530 --> 00:34:31,530 нещо подобно. 535 00:34:31,530 --> 00:34:33,719 Колкото и да можете да го избегнете, наистина искате да се покаже на потребителя какво да правя 536 00:34:33,719 --> 00:34:36,429 просто поради естеството на това как интернет страницата е изложена. 537 00:34:36,429 --> 00:34:39,090 С други думи, ако отида до Facebook, без влизане в системата, 538 00:34:39,090 --> 00:34:40,920 първото нещо, което виждам на главната страница - 539 00:34:40,920 --> 00:34:44,480 това е една малка кутийка за вход. Така че, дух. Аз трябва да влезнете Това е точно там. 540 00:34:44,480 --> 00:34:48,030 Като има предвид, ако аз отидох до Facebook и аз трябваше да кликнете малко линк в долната 541 00:34:48,030 --> 00:34:51,920 че каза "влезте в", а останалата част от страницата е просто някаква картина или нещо такова, 542 00:34:51,920 --> 00:34:54,820 Аз не бих наистина знам какво да правя, нали? Бих се бърка. 543 00:34:54,820 --> 00:34:58,590 Така че, това може да ми каже да отида там долу и щракнете върху бутона, за да влезете в системата, 544 00:34:58,590 --> 00:35:01,080 или дневника на бутон може да бъде точно в горната част, където аз отивам да го видя. 545 00:35:01,080 --> 00:35:04,780 Вие искате винаги да се показва на потребителя, какво да правя, 546 00:35:04,780 --> 00:35:06,750 и че трябва да се характеризират в самата страница. 547 00:35:06,750 --> 00:35:09,880 >> Когато си мисля за дизайн и подигравателен до различни начини за 548 00:35:09,880 --> 00:35:13,810 изразяване на вашия сайт, което наистина искам да мисля за това, потребителите ще 549 00:35:13,810 --> 00:35:19,380 да се прави и как можете да ги покажа какво да правя. 550 00:35:19,380 --> 00:35:23,530 Едно последно нещо е тестване е много, много важно. 551 00:35:23,530 --> 00:35:27,400 Това е страхотно да се намери някой - вземете един приятел, вземи някой, вие не знаете дори - 552 00:35:27,400 --> 00:35:30,420 който никога не е виждал на сайта, преди да използвате сайта. 553 00:35:30,420 --> 00:35:33,650 Тъй като сте работили на обекта, за часа, в който сте били вторачени в нея, 554 00:35:33,650 --> 00:35:36,670 и вие знаете точно какво да направя, така че явно ти започваш да се тестване на 555 00:35:36,670 --> 00:35:39,520 неща, които сте били, работещи по и че знаете работата. 556 00:35:39,520 --> 00:35:42,680 Но ако някой друг идва заедно и използва сайта, който никога не го е използвал и преди, 557 00:35:42,680 --> 00:35:46,880 това е едно уникално преживяване, защото трябва някой, който не разполага с предварително познаване 558 00:35:46,880 --> 00:35:51,530 на обекта навлиза в нея, така че те ще трябва ефективно никаква представа какво да правя 559 00:35:51,530 --> 00:35:54,890 или това, което вид на случаите на използване са подарък за тях. 560 00:35:54,890 --> 00:36:00,930 Това е страхотно. Това е уникален, защото те са по същество един човек с празен за ума. 561 00:36:00,930 --> 00:36:03,750 Те могат да ви кажа, ако нещо е объркващо или неясно. 562 00:36:03,750 --> 00:36:07,580 Те може да ви даде представа за това какво точно е потребителски опит на вашия сайт. 563 00:36:07,580 --> 00:36:10,630 Тя може да бъде много трудно да се каже, че себе си, така че определено бих Ви препоръчваме 564 00:36:10,630 --> 00:36:13,640 както сте разработването на вашите проекти - ако правиш уеб-базирани проекти - 565 00:36:13,640 --> 00:36:18,290 да накараш хората ползване на сайта още имате някакъв вид функционално демо. 566 00:36:18,290 --> 00:36:25,330 >> Сега отивам да поговоря малко за това как да се управлява проект за уеб програмиране. 567 00:36:25,330 --> 00:36:28,900 Минахме над това как можете да направите резервно челна страна на технически, 568 00:36:28,900 --> 00:36:31,050 Как можете да проектирате един наистина добър сайт, 569 00:36:31,050 --> 00:36:34,150 и това е чудесно, ако работите от себе си, но - 570 00:36:34,150 --> 00:36:37,300 дори ако работите от себе си и особено ако работите в отбор, 571 00:36:37,300 --> 00:36:39,580 управление на проекти се превръща в голям проблем. 572 00:36:39,580 --> 00:36:42,340 Вие сте нещо като чух за управление на проекти в различни форми, тъй като 573 00:36:42,340 --> 00:36:45,410 началното училище, когато било казано, групова работа. 574 00:36:45,410 --> 00:36:46,820 Вие трябва да си сътрудничат, да контактуват, всичко това. 575 00:36:46,820 --> 00:36:49,620 Всичко това все още се прилага тук, но има някои уникални обстоятелства с 576 00:36:49,620 --> 00:36:54,910 компютърни науки, който искате да бъде запознат, а вие искате да се уверете, че се справят добре. 577 00:36:54,910 --> 00:36:58,050 Първо ще говоря малко за екипа, който ще бъде инча 578 00:36:58,050 --> 00:37:03,280 Това е много важно да изберете правилния размер на екип, който да се работи върху, 579 00:37:03,280 --> 00:37:05,890 и в своя окончателен проект мисля, че имате възможност да изберете 580 00:37:05,890 --> 00:37:08,610 между един и четири души, ако съм вярна. 581 00:37:08,610 --> 00:37:12,050 Вие искате да се уверите, че не сте просто избора на броя на хората, 582 00:37:12,050 --> 00:37:14,950 че искате да работите с, защото те са вашите приятели. 583 00:37:14,950 --> 00:37:18,170 Вие искате да изберете един отбор, който е по-добър размер и че ще си свършат работата. 584 00:37:18,170 --> 00:37:22,700 Няма компромис в наличието на повече хора в сравнение с по-малко хора. 585 00:37:22,700 --> 00:37:25,320 Ако имате повече хора, очевидно повече работа може да бъде направено 586 00:37:25,320 --> 00:37:28,450 защото имате много хора, много код, много идеи, 587 00:37:28,450 --> 00:37:29,870 и всичко, което е страхотно. 588 00:37:29,870 --> 00:37:32,590 Но това също изисква много по-управление и много повече комуникация. 589 00:37:32,590 --> 00:37:34,720 С други думи, ако имате 4 хора, които работят по същия проект 590 00:37:34,720 --> 00:37:39,200 и всички те са с редактирането на същия код, повече или по-малко те всички видове трябва да знаете 591 00:37:39,200 --> 00:37:40,920 какво се случва, така че изисква от вас - 592 00:37:40,920 --> 00:37:44,580 ако добавите някаква нова функция ви вид трябва да се каже на хората - Аз съм това да се добави, 593 00:37:44,580 --> 00:37:48,510 Сменям това по този начин - особено ако можете да получите в наистина дълбока неща 594 00:37:48,510 --> 00:37:52,730 като моделите и контролерите, които са действително ще повлияе на начина на работа на обекта. 595 00:37:52,730 --> 00:37:54,500 Целият отбор трябва да е наясно с това, 596 00:37:54,500 --> 00:37:58,140 така че трябва да се уверете, че не сте избора твърде голям отбор, който ще бъде трудно 597 00:37:58,140 --> 00:37:59,970 да направи това съобщение. 598 00:37:59,970 --> 00:38:02,930 Можете също така не искате да изберете достатъчно малък екип, че не започваш да се 599 00:38:02,930 --> 00:38:06,250 да бъде в състояние да комуникира, защото това е просто вас. 600 00:38:06,250 --> 00:38:11,270 >> Друго нещо е да се помисли баланса на умения, където хората са. 601 00:38:11,270 --> 00:38:14,350 Това е чудесно, ако всички сте наистина добри програмисти. 602 00:38:14,350 --> 00:38:17,050 Но ако сте всички сървърни хора, значи, че вашият сайт е няма да изглежда много добре 603 00:38:17,050 --> 00:38:20,860 защото имате тази голяма база данни, и го прави супер-бързи заявки за търсене - 604 00:38:20,860 --> 00:38:26,130 което е страхотно - но когато отидете на нея, тя е като един сайт 1990 с червено и синьо 605 00:38:26,130 --> 00:38:30,370 навсякъде, и това не е добре също. 606 00:38:30,370 --> 00:38:34,210 Забележете, че Бен и аз работя в екип са много хубаво, защото аз съм нещо повече 607 00:38:34,210 --> 00:38:38,030 в предния край, и двамата си взаимодействат в средата-края, и Бен е наистина добър с обратно края на неща, 608 00:38:38,030 --> 00:38:43,550 така че работи много добре, защото можем да проектираме всеки сайт, и в общи линии дупките 609 00:38:43,550 --> 00:38:47,580 в този сайт, който трябва да бъде попълнено може да бъде запълнена от всяка една от нас, или може би и двете. 610 00:38:47,580 --> 00:38:50,210 Вие искате да се уверите, че няма дупки в своя екип. 611 00:38:50,210 --> 00:38:51,180 Всичко е наред, ако има малко припокриване. 612 00:38:51,180 --> 00:38:53,670 С други думи, ако имате 2-ма души, които са едновременно добър с задния край, 613 00:38:53,670 --> 00:38:57,250 че може да бъде добър, както и защото те могат да си помагат един на друг с проблеми 614 00:38:57,250 --> 00:38:58,820 че те имат. 615 00:38:58,820 --> 00:39:02,590 Това може да бъде проблем, ако имате само един човек, който е отговорен за нещо определено 616 00:39:02,590 --> 00:39:06,650 и ако се движат в един проблем, така че искам да имам малко припокриване 617 00:39:06,650 --> 00:39:10,760 но най-важното е искате да се уверите, че всички възможни дупки са запълнени. 618 00:39:10,760 --> 00:39:17,550 >> Последното нещо - и това трябва да е очевидно, но това често не е така. 619 00:39:17,550 --> 00:39:19,550 Наистина ли искаш да се забавляваш. 620 00:39:19,550 --> 00:39:23,360 Смисълът на този последен проект в CS50 и често точката на Мрежата за развитие като цяло 621 00:39:23,360 --> 00:39:26,360 не е просто да си вършат работа, защото тя се нуждае от това. 622 00:39:26,360 --> 00:39:29,140 Наистина ли искаш да се забавляваш, а вие искате да се направи нещо 623 00:39:29,140 --> 00:39:31,180 че те мотивира да работят по него. 624 00:39:31,180 --> 00:39:33,650 Ако всичко, което правим е болка да седнем и да работим върху, 625 00:39:33,650 --> 00:39:35,650 тогава вие не сте избора дясната проекта. 626 00:39:35,650 --> 00:39:37,730 Вие искате да изберете нещо, което ще намерите интересни, 627 00:39:37,730 --> 00:39:41,150 Наистина ли искате да видите резултата, вие сте развълнуван, когато получите нова идея за 628 00:39:41,150 --> 00:39:44,700 нещо, което може да направи - така че има всички видове проекти там, че аз съм сигурен, че 629 00:39:44,700 --> 00:39:47,290 можете да намерите - всеки има нещо, което наистина ще ги заинтригува 630 00:39:47,290 --> 00:39:49,290 ако те са прави уеб-базиран проект. 631 00:39:49,290 --> 00:39:52,210 Аз ще го кажа отново, точно сега. 632 00:39:52,210 --> 00:39:54,520 Ако вашият проект изглежда като болка и не искате да се работи върху него, 633 00:39:54,520 --> 00:39:57,260 изберете друг проект. Изберете нещо, което наистина ви вдъхновява. 634 00:39:57,260 --> 00:40:00,260 >> Бен спомена тази концепция за итерация малко, и аз искам да го прегледаме малко. 635 00:40:00,260 --> 00:40:08,250 Това е наистина важно да се работи в струи, където можете да получат нещо функционално. 636 00:40:08,250 --> 00:40:13,420 Тя може да бъде чудесно, ако имате този план за уеб сайт, който ще направи A, B, и C, 637 00:40:13,420 --> 00:40:16,000 и в крайна сметка ще стигнем до там. 638 00:40:16,000 --> 00:40:18,600 Но сте остана в тази фаза, където вие работите върху него и работи по него, 639 00:40:18,600 --> 00:40:23,330 но нищо не е направено получаване. Не е нужно нищо да се види и осезаем, функционален нещо. 640 00:40:23,330 --> 00:40:27,940 Това, което наистина искам да направя толкова, колкото тя изглежда нещо като болка понякога да 641 00:40:27,940 --> 00:40:32,300 работи върху нещо и след това някак го капачка, така че това е най-малко на една стабилна, бягане 642 00:40:32,300 --> 00:40:34,910 версия, дори и ако тя не разполага с всички функции, които искате. 643 00:40:34,910 --> 00:40:37,690 И може би има някои функции, които наистина искат да се добави, но просто не мога да 644 00:40:37,690 --> 00:40:41,830 защото искате да получите този сайт на функционална гледна точка. 645 00:40:41,830 --> 00:40:44,400 И така, вие искате да имате вид на целия процес на развитие изглежда така. 646 00:40:44,400 --> 00:40:47,810 Вие искате да се започне от някъде функционален - или по същество да започне с нищо - 647 00:40:47,810 --> 00:40:49,890 но искате да получите някъде много основен и функционален. 648 00:40:49,890 --> 00:40:54,940 И след това отново, направи нещо като скок и да получите някъде функционален отново. 649 00:40:54,940 --> 00:40:59,190 Вие бавно ще се изгради, и то може да отиде малко по-бавно, отколкото би по друг начин, 650 00:40:59,190 --> 00:41:03,000 но в дългосрочен план, ако сте постоянно остана в този среден път фаза, където можете 651 00:41:03,000 --> 00:41:06,380 всъщност не са нищо работа, тя може да бъде една наистина голяма неудовлетвореност 652 00:41:06,380 --> 00:41:09,970 да работят върху проекта си, защото ти си винаги толкова близо до получаване на това работи, 653 00:41:09,970 --> 00:41:12,130 и че никога не е действително работи. 654 00:41:12,130 --> 00:41:14,810 Вие искате да работите в тези функционални струи, 655 00:41:14,810 --> 00:41:17,950 и вие искате да се направят някои размисъл след всяка една. 656 00:41:17,950 --> 00:41:21,260 С други думи, след като сте на място, където мястото е сега работи - 657 00:41:21,260 --> 00:41:24,790 че не разполага с всичко, което ви харесва, но го прави някои неща - 658 00:41:24,790 --> 00:41:28,870 искате да се мисли, добре, е този сайт осъществяване на целта, която съм тръгнал да правя? 659 00:41:28,870 --> 00:41:33,410 С други думи, ако сайтът ще направи X, е това, което съм, работещи в посока на X? 660 00:41:33,410 --> 00:41:36,450 Има всички функции, които аз исках там? 661 00:41:36,450 --> 00:41:39,340 И освен това, е, че служи на общата цел, която искам? 662 00:41:39,340 --> 00:41:43,200 Ако сте констатацията, че вашият сайт е да започнете да се отклони в друга посока 663 00:41:43,200 --> 00:41:47,330 или може би нещата просто вид са не работят навън, може би е време да превключите предавките малко. 664 00:41:47,330 --> 00:41:51,700 С други думи, това си струва като се има предвид - че си струва да хвърлят идеи, ако е необходимо 665 00:41:51,700 --> 00:41:57,950 и като се има предвид съм аз наистина се работи за това, което искам да бъда. 666 00:41:57,950 --> 00:42:00,760 >> Вярвам, че това е следващата ми точка. Не се страхувайте да се откаже от идеите си. 667 00:42:00,760 --> 00:42:03,750 Само защото сте прекарали много часове в работа на функция 668 00:42:03,750 --> 00:42:07,890 и най-накрая имам работа, но тя наистина не върви толкова добре - 669 00:42:07,890 --> 00:42:12,690 като това не е толкова полезно или потребители имат проблеми да го използвате - неща от този род - 670 00:42:12,690 --> 00:42:15,300 не се страхувайте да го изхвърлим. 671 00:42:15,300 --> 00:42:17,650 Това е гадно, че сте прекарали много време да работи върху него, 672 00:42:17,650 --> 00:42:21,870 но в крайна сметка не искате един сайт, който е един вид събрахме заедно от тези парчета, които 673 00:42:21,870 --> 00:42:25,380 вид дейност, но не са толкова добре обслужен. 674 00:42:25,380 --> 00:42:27,990 Също така, не се страхувайте да прегърне нови идеи. 675 00:42:27,990 --> 00:42:30,050 Ако някой идва и казва, хей, че сайта изглежда наистина страхотно, но 676 00:42:30,050 --> 00:42:32,290 не би ли било чудесно, дори ако той също е направил това? 677 00:42:32,290 --> 00:42:36,220 Просто защото това е нещо, което не е имал намерение и нещо, което не е във вашата 678 00:42:36,220 --> 00:42:37,900 характеристики, нещо, което не сте задали, за да направя, 679 00:42:37,900 --> 00:42:40,860 не се страхувайте да го поеме и след това да работят с него. 680 00:42:40,860 --> 00:42:43,680 Тъй като често идеите, които ви движат с по време на курса на развитие 681 00:42:43,680 --> 00:42:47,630 в крайна сметка е наистина готини функции на сайта. 682 00:42:47,630 --> 00:42:49,630 >> Казвал съм го и преди. Аз ще го кажа отново. 683 00:42:49,630 --> 00:42:51,630 Тестери са супер, супер полезно. 684 00:42:51,630 --> 00:42:56,350 Опитайте се да получите хора, които никога не са виждали на сайта, преди да влезете и да видим какво става 685 00:42:56,350 --> 00:42:59,080 защото те могат да тестват не само полезността на сайта и работата на потребителя, 686 00:42:59,080 --> 00:43:02,070 но те също могат да тестват функционалността по начини, които не можеш. 687 00:43:02,070 --> 00:43:06,430 Ако направите някаква функция, която прави нещо определено 688 00:43:06,430 --> 00:43:11,620 и вие знаете, че ще ходи да се направи, че едно и също нещо правилно всеки път, това е страхотно. 689 00:43:11,620 --> 00:43:16,610 Но това често може да бъде трудно да се обясни ъглови случаите, когато потребителят може да 690 00:43:16,610 --> 00:43:19,500 напишете нещо, което не са очаквали - именно защото сте дефинирали 691 00:43:19,500 --> 00:43:21,500 характеристиките себе си. 692 00:43:21,500 --> 00:43:23,730 Така че, за да има някой, хайде, който няма представа как да използвате сайта 693 00:43:23,730 --> 00:43:26,840 и просто да го разбие в каквото и начини, по които може да направите, е наистина полезна, защото ви 694 00:43:26,840 --> 00:43:30,340 добиете представа от съвсем различна гледна точка на това, което на сайта си работи 695 00:43:30,340 --> 00:43:33,300 и това, което се нуждае от ремонт. 696 00:43:33,300 --> 00:43:37,070 >> На последно място, аз отивам да се говори за някои общи добри практики, 697 00:43:37,070 --> 00:43:42,470 и съм виждал много от тези в CS50, но те също така наистина, наистина се прилагат в обстановка на даден проект. 698 00:43:42,470 --> 00:43:47,600 Един от тях е коментари. Винаги коментар вашето код особено ако работите на голям екип. 699 00:43:47,600 --> 00:43:51,230 Тя може да бъде толкова досадно да просто да има гигантски блок от код, че някой е написал 700 00:43:51,230 --> 00:43:54,230 а може би и тя работи, може би това не е така, но вие нямате представа какво прави, 701 00:43:54,230 --> 00:43:58,010 така че нямам представа дали това е полезно или не, или дали тя трябва да бъде там или не, 702 00:43:58,010 --> 00:44:00,200 и ако работите върху нещо друго, че е възможно дори, че вие ​​работите по 703 00:44:00,200 --> 00:44:06,590 едно и също нещо, така че просто бъдете много, много внимателни, за да бъде внимателен на вашите колеги 704 00:44:06,590 --> 00:44:09,710 и пишат код, който е добре документирано. 705 00:44:09,710 --> 00:44:13,580 Не е нужно да се стигне дотам, че да направи цялата работа, където искал, ако увеличите 706 00:44:13,580 --> 00:44:16,620 брояч имате коментар, който казва, аз съм добавяне на 1 към този брояч. 707 00:44:16,620 --> 00:44:20,450 То не трябва да бъде, че подробно, но за всяка функция, която сте някога писане 708 00:44:20,450 --> 00:44:23,160 трябва да има някаква документация за това какво точно означава тази функция, 709 00:44:23,160 --> 00:44:25,140 какви са нейните входове са, и това, което тя трябва да се върне. 710 00:44:25,140 --> 00:44:27,800 По този начин можете да използвате други компоненти на хората за сайта 711 00:44:27,800 --> 00:44:31,990 и можете да се работи за изграждане на нещо голямо. 712 00:44:31,990 --> 00:44:34,100 >> Друго важно нещо е, че искам да правя редовни почиствания. 713 00:44:34,100 --> 00:44:40,490 Код получава разхвърлян. Да не се чувстват зле, ако вашият код е просто напълно нечетим и гигантски бъркотия. 714 00:44:40,490 --> 00:44:42,770 Това се случва в областта на уеб развитие винаги. 715 00:44:42,770 --> 00:44:46,530 Вие сте добавяне на нови функции, премахване на старите. Stuff ще е там, че не трябва да бъде. 716 00:44:46,530 --> 00:44:49,330 Това е добре, но вие искате да се уверете, че за да се справят с това редовно. 717 00:44:49,330 --> 00:44:53,430 Вие не искате да се остави да се изгради до точката, в която просто не мога да намеря нищо 718 00:44:53,430 --> 00:44:56,430 в кода си, а вие нямате представа какво нещо прави. 719 00:44:56,430 --> 00:44:58,430 Такъв е случаят с HTML. 720 00:44:58,430 --> 00:44:59,490 Понякога ще се окажете с предмети, които не съдържат нищо, 721 00:44:59,490 --> 00:45:01,320 и вие ще искате да се отървете от тях. 722 00:45:01,320 --> 00:45:04,610 В CSS, можете да се позовава на елементи, които не са вече там, 723 00:45:04,610 --> 00:45:06,340 така че искате да се отървете от този код. 724 00:45:06,340 --> 00:45:09,900 В JavaScript, може да сте извадили нещо от HTML. 725 00:45:09,900 --> 00:45:13,150 Така че, вие искате да се уверите, че сте винаги почистване, което прави нещата доста 726 00:45:13,150 --> 00:45:17,450 толкова, колкото можете, на регулярна основа. 727 00:45:17,450 --> 00:45:21,060 >> Друг наистина полезно нещо, че аз не мисля, че се очертава много в CS50 728 00:45:21,060 --> 00:45:23,430 но си струва класирането им е контрол на версиите. 729 00:45:23,430 --> 00:45:27,180 Идеята за контрол на версиите е, когато вие основно следене на целия напредък 730 00:45:27,180 --> 00:45:30,820 сте направили към вашия сайт и ако в даден момент ти осъзнаваш, о, това е работил 731 00:45:30,820 --> 00:45:35,220 Преди известно време, но тя не работи повече, можете да се върнете към предишните версии 732 00:45:35,220 --> 00:45:37,720 и да видим какво се е променило оттогава и неща от този род. 733 00:45:37,720 --> 00:45:41,670 Основният начин да направите това е с Git, и Git е целият този вид система, която 734 00:45:41,670 --> 00:45:46,390 Вярвам, Tommy MacWilliam даде семинар за миналата година. 735 00:45:46,390 --> 00:45:51,520 Ако отидете в CS50 семинарите за 2011 г., можете да видите своя семинар по този въпрос. 736 00:45:51,520 --> 00:45:57,070 Идеята на Git е основно, че на редовни интервали от време, че правиш тези ангажименти 737 00:45:57,070 --> 00:46:01,430 които са начини за заявявайки, че сайта е в доста стабилна версия в момента, така че 738 00:46:01,430 --> 00:46:05,910 Правя го от опаковки и го отпрати към сървър, а след това можете да отидете на този сървър 739 00:46:05,910 --> 00:46:07,910 и гледам на всички предишни версии на кода си и да видим как се напредва 740 00:46:07,910 --> 00:46:12,210 и всички такива добри неща. 741 00:46:12,210 --> 00:46:14,210 Така че, това е в общи линии. 742 00:46:14,210 --> 00:46:17,870 Що се отнася до уеб програмиране, ние сме щастливи да си наоколо и да отговори на всеки 743 00:46:17,870 --> 00:46:20,570 въпроси, доколкото това е нашата презентация. 744 00:46:20,570 --> 00:46:22,900 Това е всичко. Благодаря. >> [Бен] Благодаря. 745 00:46:22,900 --> 00:46:28,480 [Аплодисменти] 746 00:46:28,480 --> 00:46:30,950 >> [Billy] Персонал, няма кой да имате някакви въпроси за неща, които ние сме обхванати 747 00:46:30,950 --> 00:46:33,950 или неща, които ние не сме включени, че те се надяваха, че ще покриват? 748 00:46:33,950 --> 00:46:35,950 Ние ще се радваме да отговорим на тези. Някой? 749 00:46:35,950 --> 00:46:50,360 [Член аудитория] Какви са плюсовете и минусите на използване на Ruby или използване Python? 750 00:46:50,360 --> 00:46:58,660 [Бен] Въпросът е, какви са плюсовете и минусите на използване на Ruby или Пайтън 751 00:46:58,660 --> 00:46:59,900 вместо като PHP. 752 00:46:59,900 --> 00:47:11,340 Плюсовете са, че Ruby и Пайтън са много по-добре, отколкото езика PHP. 753 00:47:11,340 --> 00:47:14,920 Поне по мое мнение, и аз мисля, че в много от мненията на други хора, както добре. 754 00:47:14,920 --> 00:47:20,990 Те са били предназначени повече за правене на сложни неща, 755 00:47:20,990 --> 00:47:25,380 и по-малко за пердах заедно уеб страници наистина бързо с 756 00:47:25,380 --> 00:47:28,400 малко на динамично съдържание. 757 00:47:28,400 --> 00:47:35,180 Затворниците са, че там е малко по-малко - има повече от кривата на обучение 758 00:47:35,180 --> 00:47:37,220 , за да ги създаде. 759 00:47:37,220 --> 00:47:41,010 Това е, като в PHP, може просто да има HTML файл и ще ви пиша по-малко, отколкото, 760 00:47:41,010 --> 00:47:43,060 въпросителен знак, а след това ви пиша някакъв код, и след това да напишете въпросителен знак, 761 00:47:43,060 --> 00:47:45,700 по-голяма-от, а след това сте готови. 762 00:47:45,700 --> 00:47:50,300 В други езици като Ruby или Python, 763 00:47:50,300 --> 00:47:56,810 , което трябва да мине през един малко повече работа, за да получите първоначалното управление сайт. 764 00:47:56,810 --> 00:48:02,730 Има също така и - поне той да бъде използван в случай - че има и още документация 765 00:48:02,730 --> 00:48:05,480 на разположение за PHP, само защото има повече хора, които го използват. 766 00:48:05,480 --> 00:48:09,370 Мисля, че това не е толкова голям проблем вече. 767 00:48:09,370 --> 00:48:12,520 Има със сигурност много добра документация за неща като Ruby по релси 768 00:48:12,520 --> 00:48:16,080 или Django за Python е еквивалент. 769 00:48:16,080 --> 00:48:25,910 PHP е един, че всеки се е използвал в продължение на години, и вие знаете как тя работи. 770 00:48:25,910 --> 00:48:28,460 Ruby и Python са малко по-малко зрели. 771 00:48:28,460 --> 00:48:33,130 >> [Член аудитория] Ако ви се налага да избират между една от тях, за да учат или да вдигне, 772 00:48:33,130 --> 00:48:36,130 които бихте предпочели? 773 00:48:36,130 --> 00:48:38,870 Честно казано, мисля, че зависи от човека. 774 00:48:38,870 --> 00:48:45,450 Съжалявам. Въпросът е кой ще те вземе някой да се научи? 775 00:48:45,450 --> 00:48:50,230 Намирам Python най-хубавото лично. 776 00:48:50,230 --> 00:48:55,360 Има много хора, които - аз направих първия си проект в Мрежата Dev в Python и Django. 777 00:48:55,360 --> 00:49:00,300 Има много хора, които обичат Ruby по релси също. 778 00:49:00,300 --> 00:49:02,650 Вероятно все повече хора, които знаят Ruby по релси. 779 00:49:02,650 --> 00:49:05,270 Честно казано, аз просто ще отида с каквото и хората около вас знаят 780 00:49:05,270 --> 00:49:09,680 , така че да има хора, да задават въпроси. 781 00:49:19,640 --> 00:49:24,170 >> Въпросът беше - на споделени сървъри е малко трудно да се работи върху Python? 782 00:49:24,170 --> 00:49:26,170 Това зависи от вашия хостинг. 783 00:49:26,170 --> 00:49:29,400 Съществуват известен брой на уеб Силите, които ще публикуваме Python неща. 784 00:49:29,400 --> 00:49:31,400 WebFaction прави това, нали? 785 00:49:31,400 --> 00:49:34,400 WebFaction е едно, че Били и аз се използва за някои проекти. 786 00:49:34,400 --> 00:49:37,750 Те са наистина страхотно. Те подкрепят повечето езици. 787 00:49:37,750 --> 00:49:40,020 Но е вярно, че PHP е много по-широка подкрепа. 788 00:49:40,020 --> 00:49:45,210 Така че, ако сте остана на уеб-домакин, която само върши PHP, че това е добра причина да се използва PHP. 789 00:49:45,210 --> 00:49:56,010 >> [Аудитория потребител] Аз просто имам в обучение как да намират някои бази данни, 790 00:49:56,010 --> 00:50:00,680 и знам, че ми SQL е навсякъде, но аз наскоро се е изложен на - 791 00:50:00,680 --> 00:50:04,470 и ти го посочи. Виждате ли JSON и разширяеми бази данни. 792 00:50:04,470 --> 00:50:14,580 My SQL все още е навсякъде. Как виждате това да се случи? 793 00:50:14,580 --> 00:50:21,330 Има ли ще бъде все по-голяма тенденция за повече разширяема (недоловим)? 794 00:50:21,330 --> 00:50:30,100 Въпросът беше - не мисля, че там ще бъде тенденция към не-SQL база данни. 795 00:50:30,100 --> 00:50:33,850 Например, като MongoDB. Мисля, че това определено е вярно. 796 00:50:33,850 --> 00:50:38,730 Моят съвет е най-вече свързани с MySQL тук само защото е MySQL 797 00:50:38,730 --> 00:50:40,950 индустриален стандарт. 798 00:50:40,950 --> 00:50:45,950 Лично аз предпочитам бази данни, които не разполагат с schemos като MongoDB 799 00:50:45,950 --> 00:50:49,520 , където не е нужно издаването на, о, аз трябва да добавите друга колона. 800 00:50:49,520 --> 00:50:51,600 Горко ми, като каквото и да правя? 801 00:50:51,600 --> 00:50:55,840 Това е много трудно да се направи, че на MySQL, но когато имаш нещо като Монго 802 00:50:55,840 --> 00:50:57,840 това е много по-хубав. 803 00:50:57,840 --> 00:51:03,780 Другото хубаво нещо за Монго е, че вашите записи са всъщност JavaScript обекти. 804 00:51:03,780 --> 00:51:10,110 Няма по вид стъпка преобразуване, където трябва да се вземат тези редове за бази данни 805 00:51:10,110 --> 00:51:13,140 и ги превръщат в обект на JavaScript и след това да ги изпратите по жицата. 806 00:51:13,140 --> 00:51:20,290 Мисля, че такива неща, че ще бъде много, много полезно за бързо уеб развитие в бъдеще. 807 00:51:20,290 --> 00:51:23,060 >> [Billy] Нещо Бих добавил, която е само една обща точка е, че 808 00:51:23,060 --> 00:51:26,580 не се чувствам като теб трябва да е научил всичко от езиците, които сме обсъдени 809 00:51:26,580 --> 00:51:28,580 от нашия семинар. 810 00:51:28,580 --> 00:51:30,560 Очевидно въпросът е да ви даде представа за това какво е там, 811 00:51:30,560 --> 00:51:33,450 и ако сте заинтригувани от някое от нещата, които споменах можете да ги Гугъл 812 00:51:33,450 --> 00:51:35,830 и прочетете за тях. 813 00:51:35,830 --> 00:51:38,750 И както споменах, че има няколко семинари, които се занимават с точно тези неща. 814 00:51:38,750 --> 00:51:41,660 Има дори повече семинари, които не са споменати, че най-вероятно да получите в 815 00:51:41,660 --> 00:51:43,660 тези неща, както добре. 816 00:51:43,660 --> 00:51:46,610 Идеята е, че ако искате да работите върху нещо, тук са инструментите на ваше разположение. 817 00:51:46,610 --> 00:51:51,630 Да не се чувстват претоварени, ако не сте много сигурни какви са тези инструменти правят точно, 818 00:51:51,630 --> 00:51:54,830 но знаем, че те са там, и че можете да направите широка употреба от тях 819 00:51:54,830 --> 00:51:56,830 от Гугъл. 820 00:51:56,830 --> 00:51:59,960 >> [Член аудитория] Какви неща ще трябва да направя, за да се уверете, че вашия сайт 821 00:51:59,960 --> 00:52:02,530 изглежда добре на мобилни устройства? 822 00:52:02,530 --> 00:52:05,590 [Billy] Мобилните устройства са малко по-трудни. 823 00:52:05,590 --> 00:52:07,590 Има два начина, можете да го подход. 824 00:52:07,590 --> 00:52:11,500 Първият начин е, че вие ​​действително имате мобилен уебсайт. 825 00:52:11,500 --> 00:52:14,660 С други думи, вие извършвате някаква откриване в началото 826 00:52:14,660 --> 00:52:18,830 когато браузърът се прави искане към вашия сайт, които или казва 827 00:52:18,830 --> 00:52:25,240 върнете тази гледна точка - което ще е и виждането за настолни или преносими браузъри - 828 00:52:25,240 --> 00:52:27,710 и този друг изглед за мобилни устройства. 829 00:52:27,710 --> 00:52:33,090 Това е място, където възгледи са наистина хубави, че в голяма степен може да суап 830 00:52:33,090 --> 00:52:37,580 двама и има интерфейс, който работи много добре на мобилни устройства 831 00:52:37,580 --> 00:52:40,770 и да имат напълно различен един, който работи добре на устройства на браузъра. 832 00:52:40,770 --> 00:52:43,770 Проблемът е, че е необходимо много време, тъй като това означава, кодиране 833 00:52:43,770 --> 00:52:47,060 напълно различен интерфейс. 834 00:52:47,060 --> 00:52:49,720 Другият начин, по който можете да го направите, е - 835 00:52:49,720 --> 00:52:55,250 много от съвременните телефони ще покаже сайтове и се опитват да ги направят като браузър би 836 00:52:55,250 --> 00:52:57,680 и те правят най-добре. 837 00:52:57,680 --> 00:53:04,340 Можете да вид се опитват да останат светлина върху размера на JQuery JavaScript, който използвате 838 00:53:04,340 --> 00:53:07,360 който се стреми да бъде мястото, където нещата могат да се объркат малко. 839 00:53:07,360 --> 00:53:13,430 Това е нещо като начина, по който трябва да се използва, ако не е нужно много време. 840 00:53:13,430 --> 00:53:18,540 Ако ви е нужно време, за да работи на мобилен интерфейс, това е очевидно най-добрият вариант. 841 00:53:18,540 --> 00:53:23,320 >> Мисля, че като цяло за CS50 проекти, вие ще искате да изберете една или друга страна. 842 00:53:23,320 --> 00:53:27,990 С други думи, вие искате да направите мобилно приложение или искате да направите уеб сайт на работния плот. 843 00:53:27,990 --> 00:53:32,200 И това някак определя къде да отидете с това. 844 00:53:32,200 --> 00:53:35,360 Но ако искате да го разшири по-късно, вероятно най-добрият ти залог е 845 00:53:35,360 --> 00:53:37,360 да се направи друг интерфейс за другия. 846 00:53:51,650 --> 00:53:56,340 Имам малко опит в разработването на WordPress-базирани сайтове. 847 00:53:56,340 --> 00:53:58,670 Аз домакин на личен сайт на WordPress за известно време. 848 00:53:58,670 --> 00:54:02,310 Тези видове рамки може да бъде хубаво, точно както много основни неща. 849 00:54:02,310 --> 00:54:07,050 Често вие просто ще се сблъскате с много проблеми, макар и адаптивност. 850 00:54:07,050 --> 00:54:10,940 Вие ще искате да имате нещо да изглежда по определен начин или да бъде по определен начин 851 00:54:10,940 --> 00:54:14,510 а ти просто не може, защото това е трудно жични в системата, която 852 00:54:14,510 --> 00:54:17,480 това е начина, по който трябва да прави неща, които могат да бъдат малко по-малък проблем. 853 00:54:17,480 --> 00:54:22,020 Оттогава съм вид бил по-склонни да работят с обекти от земята. 854 00:54:22,020 --> 00:54:26,840 За такива неща в блога бази данни и неща от този род, че наистина не е толкова трудно да се изгради рамка. 855 00:54:26,840 --> 00:54:29,970 Ако сте наистина се протегна за време, можете да разбира се използва нещо като WordPress 856 00:54:29,970 --> 00:54:33,120 или нещо такова за един блог. 857 00:54:33,120 --> 00:54:38,790 Видовете неща, че блоговете магазин и не са наистина достатъчно трудно, че 858 00:54:38,790 --> 00:54:41,500 ако сте стартирали в нито една от тези видове неща, вие може би си най-добрия, само за да 859 00:54:41,500 --> 00:54:43,500 направи в къща версия. 860 00:54:43,500 --> 00:54:48,350 >> Мисля, че това е за него, така че благодаря отново, че дойдохте. 861 00:54:48,350 --> 00:54:51,960 Ние наистина се ползват разговаря с вас и се надявам, че сте научили някои неща. 862 00:54:51,960 --> 00:54:55,350 [Бен] Ние сме щастливи да говоря - ние трябва да отида, но ние сме щастливи да се говори повече извън 863 00:54:55,350 --> 00:55:01,650 ако имате друг въпрос. Благодаря отново. [Аплодисменти] 864 00:55:03,750 --> 00:55:06,000 [CS50.TV]