1
00:00:00,000 --> 00:00:02,500
[Powered by Google Translate] [講座] [Web開發：從理念到實踐]

2
00:00:02,500 --> 00:00:04,200
[本庫恩] [比利Janitsch] [哈佛大學]

3
00:00:04,200 --> 00:00:07,250
[這是CS50] [CS50.TV]

4
00:00:07,250 --> 00:00:10,840
[比利]你好，我叫比利，這是本。 >> [奔]你好。

5
00:00:10,840 --> 00:00:12,840
我們今天要談論的Web開發。

6
00:00:12,840 --> 00:00:14,840
[WEBDEV] [比利Janitsch和本·庫恩]

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
和Ben，而另一方面，知道自己在做什麼，所以他的作品在後端的東​​西。

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
從那時起，我們已經取得了哈佛大學類

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的貓的情況下，

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
>> [奔]我要談論Web開發的更多技術方面。

52
00:02:39,610 --> 00:02:42,370
讓我們只是去了一些基礎知識第一。

53
00:02:42,370 --> 00:02:45,730
當你在做一個web應用程序，

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
除此之外部門它的好，想著你的Web應用程序中的條款

64
00:03:28,600 --> 00:03:32,500
一對夫婦不同的分量。

65
00:03:32,500 --> 00:03:35,270
當你在做web開發

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
>> 要具體，通常人們瓜分了一個Web應用程序到 - 

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
例如，在你的貓的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
你可能有1視圖尋找一個崗位，所有的評論

80
00:04:46,660 --> 00:04:51,720
和不同的觀點對你的牆具有所有文章列表

81
00:04:51,720 --> 00:04:57,170
定向到你，並有不同的看法為您訂閱 - 類似的東西。

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應用程序的數據在一個不錯的方式。

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
和b）如何使它們保持同步。

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
為了您的貓的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
這2個因素 - 你想要什麼樣的數據使用，你怎麼想觀看 - 

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
所以一個好的策略實際上只是保持你的很多數據在文本BLOB  - 

136
00:08:43,510 --> 00:08:53,880
一個JSON的blob  -  JSON是JavaScript對象符號 - 

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的blob，然後，如果你以後想添加一個日期字段

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
再次，我們的貓的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
出於這個原因，你可能不希望有一個帖子說個人get請求，

165
00:10:59,030 --> 00:11:03,210
而是你只是想在整面牆1 get請求。

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對象表示法。

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
這裡是你的貓的Facebook應用程序的示例流程。

180
00:12:00,520 --> 00:12:07,760
它與您的瀏覽器請求的基礎網站的網址開始起飛。

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
和做比比動畫。

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
>> 再有就是1，我想花一點點時間對多個庫

215
00:14:38,840 --> 00:14:44,800
所謂Backbone.js因為骨幹確實能幫助你處理在客戶端模式

216
00:14:44,800 --> 00:14:47,210
和很多的混亂，它可引起。

217
00:14:47,210 --> 00:14:53,550
骨幹網為您提供的模型和集合這個概念

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
這些骨幹模型和骨幹的集合將廣播之類的東西

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
像這樣的框架將免去很多的層之間的通信

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
此外，作為一個側面說明，骨幹具有使意見交流一些功能

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
一般情況下，你可以非常簡單，只是谷歌，如果你有問題。

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
如果你正在尋找讓你的web應用程序的額外真棒。

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
這樣的東西是使其迅速方面確實有用，而且工作就像一個web應用程序應該。

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的往往可以讓你在1線表現

281
00:20:08,410 --> 00:20:10,890
什麼將採取5行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
有很多東西在互聯網上。谷歌是你最好的朋友。

324
00:22:57,560 --> 00:22:59,560
谷歌是程序員最好的朋友。

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
>> [比利]其實，在我開始與一些設計的東西，

328
00:23:14,600 --> 00:23:17,250
沒有任何人有任何任何事情，他談到了問題的本？

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
下面是一種對我們的貓Facebook上的真正的基本模板。

337
00:23:50,540 --> 00:23:54,190
我認為有現代的UI設計中的一些基礎知識

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
節制。頭是不錯的。按鈕是好的，有非常大的，浮華的色彩。

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
您可以 - 如果你有好的照相館，您可以打開排序，高達和

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
一旦你有幾個設計勾勒出在紙上或照相館或什麼的，

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的這本談了一點關於，

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
是一種動態的東西做以HT​​ML的方式。

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
四。抱歉。它實際上是右後這一點，所以我會建議

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
對於幾乎任何Web開發項目。

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
接口是絕對的經驗的一部分。

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和1出10倍做動作B，

486
00:32:05,520 --> 00:32:08,950
你可能想集中行動A.經驗

487
00:32:08,950 --> 00:32:12,240
換句話說，你想它非常，非常清楚該怎麼做A。

488
00:32:12,240 --> 00:32:15,980
A應前端和中心 - 去到現場，看到了吧，哦，它就在那裡。

489
00:32:15,980 --> 00:32:20,850
而乙顯然，你想清楚，但你可以讓它多一點

490
00:32:20,850 --> 00:32:22,850
在背景中。

491
00:32:22,850 --> 00:32:24,640
大衛給出了一個很好的例子在講座中，

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
你必須進入5個菜單，然後才能真正購買車票

495
00:32:32,700 --> 00:32:37,130
為2美元，二元五角的價值，這是多大的才能乘坐地鐵

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
為您開發的項目 - 如果你正在做的基於Web的項目 - 

565
00:36:13,640 --> 00:36:18,290
早在你有某種功能的演示使用該網站得到的人。

566
00:36:18,290 --> 00:36:25,330
>> 現在，我要談談如何管理一個Web開發項目一點點。

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
如果我是正確的1至4人。

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
排序的，如果你添加了一些新的功能，你必須告訴人們 -  I'm加入此，

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
請注意，Ben和我的工作作為一個團隊是非常好的，因為我是那種更

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
它可以是一個問題，如果你只有1人誰負責某一件事

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
如果他們正在做一個基於Web的項目。

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
這種情況發生在web開發中始終。

715
00:44:42,770 --> 00:44:46,530
你添加新的功能，刪除舊的。東西是要在那裡不應該。

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
我相信湯米MacWilliam了一個關於去年的研討會。

735
00:45:46,390 --> 00:45:51,520
如果你去到CS50研討會於2011年，你可以看到他的研討會上說。

736
00:45:51,520 --> 00:45:57,070
混帳的想法基本上是每隔一段時間你正在做這些承諾

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
>> [比利]工作人員，有沒有人想過這事我們已經討論的事情有任何疑問

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或Python的利弊

751
00:46:58,660 --> 00:46:59,900
而不是像PHP。

752
00:46:59,900 --> 00:47:11,340
優點是Ruby和Python是比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 on Rails的

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
有很多人誰 - 我做了Python和Django的我的第一個web開發項目。

777
00:48:55,360 --> 00:49:00,300
有很多人誰喜歡的Ruby on Rails也。

778
00:49:00,300 --> 00:49:02,650
或許更多的人誰on Rails的了解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
我的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
就個人而言，我更喜歡那些沒有像MongoDB的schemos數據庫

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
我覺得這樣的東西將是非常，非常有用的快速Web開發的未來。

807
00:51:20,290 --> 00:51:23,060
>> [比利]東西我想補充這僅僅是一個普遍的觀點是，

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
如果你被任何我們已經提到的東西很感興趣你可以Google他們

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
[比利]移動設備是有點硬。

823
00:52:05,590 --> 00:52:07,590
有2種方式可以接近它。

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]