1
00:00:00,000 --> 00:00:02,500
[Powered by Google Translate] [Seminarium] [Webbutveckling: Från idé till genomförande]

2
00:00:02,500 --> 00:00:04,200
[Ben Kuhn] [Billy Janitsch] [Harvard University]

3
00:00:04,200 --> 00:00:07,250
[Detta är CS50] [CS50.TV]

4
00:00:07,250 --> 00:00:10,840
[Billy] Hej, jag heter Billy och det här är Ben. >> [Ben] Hej.

5
00:00:10,840 --> 00:00:12,840
Vi kommer att tala om webbutveckling idag.

6
00:00:12,840 --> 00:00:14,840
[Webdev] [Billy Janitsch och Ben Kuhn]

7
00:00:14,840 --> 00:00:16,840
Lite om oss först.

8
00:00:16,840 --> 00:00:19,590
Ben är en slags back-end kille. Han gör saker och ting fungerar.

9
00:00:19,590 --> 00:00:21,870
Och så går jag in och göra dem vackra.

10
00:00:21,870 --> 00:00:26,610
Jag är i hög grad involverad i mer front-end layout design såna saker,

11
00:00:26,610 --> 00:00:31,260
och Ben, å andra sidan, vet vad han gör så han fungerar på back-end grejer.

12
00:00:31,260 --> 00:00:34,050
Tillsammans har vi gjort ett par saker.

13
00:00:34,050 --> 00:00:38,710
Till exempel, förra året arbetade vi på Gimblium som är ett online spelföretag.

14
00:00:38,710 --> 00:00:40,400
Det var vårt sista projekt för klassen,

15
00:00:40,400 --> 00:00:42,780
och sedan dess har vi gjort Harvard Class

16
00:00:42,780 --> 00:00:47,860
som är en online-ramverk för att surfa och shopping kurser vid Harvard.

17
00:00:47,860 --> 00:00:53,180
>> Vi kommer att börja med den här idén för vår webbplats.

18
00:00:53,180 --> 00:00:57,480
Vi kommer att göra Facebook, men för katter.

19
00:00:57,480 --> 00:00:59,520
Innan du faktiskt göra den här webbplatsen,

20
00:00:59,520 --> 00:01:02,520
gör inte denna webbplats, eftersom det inte är bra, men vi kommer att använda den som ett ramverk

21
00:01:02,520 --> 00:01:05,349
och gå igenom processen för hur vi tar den här idén

22
00:01:05,349 --> 00:01:07,450
och göra den till en riktig hemsida som vi kan använda.

23
00:01:07,450 --> 00:01:11,940
Vi börjar med att bryta hemsida ner.

24
00:01:11,940 --> 00:01:13,190
Precis som du har gjort i CS50,

25
00:01:13,190 --> 00:01:17,360
du vill tänka på vad är den verkliga komponenter som går in i denna webbplats.

26
00:01:17,360 --> 00:01:21,290
I grund och botten att vrida den från en idé som är bara typ av ett abstrakt begrepp

27
00:01:21,290 --> 00:01:23,590
till en verklig, konkret sak som du skulle kunna göra.

28
00:01:23,590 --> 00:01:25,910
Vi börjar med att ställa några frågor.

29
00:01:25,910 --> 00:01:28,070
Vad är det här webbplatsen? Varför gör vi det?

30
00:01:28,070 --> 00:01:30,670
Vad kommer det att användas till? Sånt.

31
00:01:30,670 --> 00:01:33,660
I fallet med Facebook Katt,

32
00:01:33,660 --> 00:01:37,730
vi i grund och botten vill ha en webbplats som låter katter sociala nätverk med varandra.

33
00:01:37,730 --> 00:01:41,260
Tanken är att de kan skriva på varandras väggar,

34
00:01:41,260 --> 00:01:43,510
de kan lämna synpunkter, den sortens saker.

35
00:01:43,510 --> 00:01:46,720
Och det är där vi kommer in i de funktionella komponenter.

36
00:01:46,720 --> 00:01:51,270
Vi har nu denna typ av ram - vi har användarprofiler,

37
00:01:51,270 --> 00:01:53,990
vi har synpunkter, och vi kan lägga upp.

38
00:01:53,990 --> 00:01:57,390
Kanske en dag kommer vi att inflödet gillar och sånt.

39
00:01:57,390 --> 00:02:00,410
Och vi slags vill prioritera dessa funktioner går i.

40
00:02:00,410 --> 00:02:03,340
Vi vill säga som, okej, det är verkligen viktigt att alla har en profil

41
00:02:03,340 --> 00:02:06,440
och att alla kan lägga upp på varandras väggar.

42
00:02:06,440 --> 00:02:08,509
Sekundärt till detta, skulle kommentarerna vara trevligt.

43
00:02:08,509 --> 00:02:10,180
Kanske senare kommer vi att inflödet gillar.

44
00:02:10,180 --> 00:02:13,700
Så, vill du ha en uppfattning om vad som är grundläggande för ditt projekt

45
00:02:13,700 --> 00:02:17,260
och vad blir liksom en mer generell funktion som skulle kunna tillämpas senare.

46
00:02:17,260 --> 00:02:20,870
Du vill sorts har en särskild lista i åtanke,

47
00:02:20,870 --> 00:02:24,090
men projektet att du börjar med inte kommer att vara det projekt som du är klar med.

48
00:02:24,090 --> 00:02:27,100
Med andra ord, saker och ting kommer att förändras när du utvecklar webbplatsen,

49
00:02:27,100 --> 00:02:30,090
och du vill lämna utrymme för det.

50
00:02:30,090 --> 00:02:34,470
Jag ska vända den till Ben, som kommer att prata lite om strukturen.

51
00:02:34,470 --> 00:02:39,610
>> [Ben] Jag kommer att tala om den mer tekniska sidan av webbutveckling.

52
00:02:39,610 --> 00:02:42,370
Låt oss bara gå igenom några grunderna först.

53
00:02:42,370 --> 00:02:45,730
När du gör en web app,

54
00:02:45,730 --> 00:02:50,470
huvud divisionen som du kommer att ha är

55
00:02:50,470 --> 00:02:52,700
du kommer att ha en del saker händer i klientsidan -

56
00:02:52,700 --> 00:02:56,700
dvs den kod som du är webbläsaren tar från platsen

57
00:02:56,700 --> 00:03:01,910
och JavaScript, HTML, CSS grejer.

58
00:03:01,910 --> 00:03:04,490
Det är allt på klientsidan.

59
00:03:04,490 --> 00:03:08,680
Du kommer att ha annan kod som körs på serversidan

60
00:03:08,680 --> 00:03:10,770
som håller reda på alla data som folk skickar in till dig,

61
00:03:10,770 --> 00:03:15,060
bestämmer vem att ge vad, sånt.

62
00:03:15,060 --> 00:03:20,380
Detta är bara en del terminologi så att ni alla känner till vad vi pratar om.

63
00:03:20,380 --> 00:03:28,600
Utöver detta division det är bra att tänka på din web app i form av

64
00:03:28,600 --> 00:03:32,500
ett par olika komponenter.

65
00:03:32,500 --> 00:03:35,270
När du gör webbutveckling

66
00:03:35,270 --> 00:03:41,710
en av de saker som du alltid ska försöka göra är att minska komplexiteten.

67
00:03:41,710 --> 00:03:45,710
Ju mer komplex din kod är det större chans finns det att göra fel,

68
00:03:45,710 --> 00:03:47,710
desto svårare är det att ändra senare.

69
00:03:47,710 --> 00:03:50,140
Så, om du kan dela upp din app i några distinkta funktionella områden

70
00:03:50,140 --> 00:03:57,640
det kommer - och du kan minska den typ av mängden tvär området kommunikation -

71
00:03:57,640 --> 00:04:03,530
som kommer att hjälpa dig mycket i det långa loppet när det gäller att minska buggar.

72
00:04:03,530 --> 00:04:07,950
>> För att vara konkret, brukar folk dela upp en web app till -

73
00:04:07,950 --> 00:04:13,190
dessa slags modeord nu, men de är fortfarande användbart.

74
00:04:13,190 --> 00:04:17,940
Du kanske har hört folk prata om modeller, vyer och controllers.

75
00:04:17,940 --> 00:04:23,210
Modeller är de faktiska uppgifter som din app kommer att ta itu med.

76
00:04:23,210 --> 00:04:28,260
Till exempel i din katt Facebook, skulle dina modeller vara -

77
00:04:28,260 --> 00:04:35,340
du skulle ha en modell för liknande inlägg, och en modell för användarprofiler, sånt.

78
00:04:35,340 --> 00:04:41,090
Dina synpunkter är hur du presenterar dessa data för dina användare.

79
00:04:41,090 --> 00:04:46,660
Du kanske har en vy för att titta på ett enda inlägg och alla kommentarer

80
00:04:46,660 --> 00:04:51,720
och en annan vy för din vägg som har en lista med alla inlägg

81
00:04:51,720 --> 00:04:57,170
som är riktade till dig, och en annan vy för ditt nyhetsflöde - sånt.

82
00:04:57,170 --> 00:05:00,610
Slutligen, har du de registeransvariga som i grunden när folk skickar inlägg

83
00:05:00,610 --> 00:05:03,310
och du gör uppdateringar för din backend-system,

84
00:05:03,310 --> 00:05:06,400
du öka en massa diskar, och vad som helst.

85
00:05:06,400 --> 00:05:07,860
De är dina controllers.

86
00:05:07,860 --> 00:05:11,030
>> Jag kommer att tala mest om modellerna.

87
00:05:11,030 --> 00:05:14,030
Åsikter är tekniskt sett inte så svårt och frågan är mer med att utforma dem

88
00:05:14,030 --> 00:05:22,040
Controller kommer att vara specifika för vad du skapar.

89
00:05:22,040 --> 00:05:25,220
Men det finns några ganska generella tekniker du kan använda

90
00:05:25,220 --> 00:05:30,220
för att göra dina modeller trevligare och lättare att arbeta med det jag tycker är mycket bra.

91
00:05:30,220 --> 00:05:35,860
Detta är främst kommer att handla om hur man ska hantera din webb apps data på ett trevligt sätt.

92
00:05:35,860 --> 00:05:40,420
De viktigaste frågorna med modeller

93
00:05:40,420 --> 00:05:44,540
är att de lever på klienten och servern och du måste lista ut

94
00:05:44,540 --> 00:05:51,170
a) hur man får dem - alla relevanta sådana - från servern till klienten,

95
00:05:51,170 --> 00:05:53,440
och b) hur man håller dem i synk.

96
00:05:53,440 --> 00:05:58,700
Dina användare kommer att vilja göra några uppdateringar.

97
00:05:58,700 --> 00:06:00,470
De kommer att vilja göra nya inlägg.

98
00:06:00,470 --> 00:06:04,800
De kommer att vilja att vilja saker och grejer om du har gillar.

99
00:06:04,800 --> 00:06:11,490
De är de största tekniska utmaningarna i att hantera modeller.

100
00:06:11,490 --> 00:06:15,680
Det första som du kommer att vilja fråga dig själv är

101
00:06:15,680 --> 00:06:18,420
vilken typ av data som går i denna modell och vilken typ av frågor som vi kommer att vilja göra -

102
00:06:18,420 --> 00:06:24,290
det vill säga, hur ska vi titta på modellerna?

103
00:06:24,290 --> 00:06:26,940
För din katt Facebook exempel

104
00:06:26,940 --> 00:06:31,520
ditt inlägg kommer att ha en författare i samband med det,

105
00:06:31,520 --> 00:06:35,660
någon vägg inlägg text, och en mottagare av väggen inlägget.

106
00:06:35,660 --> 00:06:38,470
Och då kanske du vill fråga det i en massa olika sätt.

107
00:06:38,470 --> 00:06:42,220
Du skulle vilja se på det med vem som skrev vilken post,

108
00:06:42,220 --> 00:06:46,620
av vem fick som posta, kanske efter det datum de publicerades.

109
00:06:46,620 --> 00:06:50,340
Men om du ska göra det efter datum, då måste man lägga till ytterligare fält till ditt inlägg

110
00:06:50,340 --> 00:06:52,490
om när det faktiskt skrivit.

111
00:06:52,490 --> 00:07:00,220
Dessa två faktorer - vilka data som du vill använda och hur du vill visa det -

112
00:07:00,220 --> 00:07:04,200
du bör tänka på dem först eftersom de är beroende av varandra,

113
00:07:04,200 --> 00:07:08,030
och det kommer att vara svårare att lägga till dem senare.

114
00:07:08,030 --> 00:07:12,750
>> Det finns några andra överväganden.

115
00:07:12,750 --> 00:07:17,540
När du funderar på hur du hanterar modeller på servern

116
00:07:17,540 --> 00:07:20,540
vad du vill titta på är -

117
00:07:20,540 --> 00:07:27,440
du i princip vill göra servern så enkel som möjligt.

118
00:07:29,440 --> 00:07:35,500
Att göra saker på klientsidan är i allmänhet mycket snabbare om du kan göra det enbart på klienten

119
00:07:35,500 --> 00:07:38,230
utan att göra någon form av nätverksbegäran.

120
00:07:38,230 --> 00:07:47,860
Tanken är att göra så många av de frågor som du kan på klienten.

121
00:07:47,860 --> 00:07:51,560
Det enda problemet med det

122
00:07:51,560 --> 00:07:54,160
är att om du begär alla data i början

123
00:07:54,160 --> 00:07:57,160
då det kommer att ta lång tid att ladda.

124
00:07:57,160 --> 00:08:02,290
Så är tanken att hitta en gyllene medelväg mellan att ha tillräckligt med data på klienten

125
00:08:02,290 --> 00:08:07,640
att du kan göra det mesta av ditt arbete där, men inte bara hämta allt på en gång

126
00:08:07,640 --> 00:08:09,710
så att du får riktigt långsamma laddningstider i början.

127
00:08:09,710 --> 00:08:12,610
Till exempel, om din katt uppgifter

128
00:08:12,610 --> 00:08:20,340
skulle du förmodligen vill hämta ett gäng nya vägg inlägg.

129
00:08:20,340 --> 00:08:23,790
Du vill inte att hämta dem alla eftersom det skulle kunna gå tillbaka ett par år.

130
00:08:23,790 --> 00:08:25,470
Men du vill inte hämta dem en i taget

131
00:08:25,470 --> 00:08:28,740
eftersom det skulle medföra en hel del nätverks overhead.

132
00:08:28,740 --> 00:08:33,620
>> Det är ofta ganska svårt - när du har en databas igång -

133
00:08:33,620 --> 00:08:37,210
Det är ofta ganska svårt att ändra vilka data du har i det -

134
00:08:37,210 --> 00:08:40,510
det vill säga, lägga till en ny databaskolumn eller något -

135
00:08:40,510 --> 00:08:43,510
så en bra strategi är egentligen bara för att hålla en hel del av dina data i en text blob -

136
00:08:43,510 --> 00:08:53,880
en JSON blob - JSON är JavaScript Object Notation -

137
00:08:53,880 --> 00:08:58,330
Anledningen till det är användbart är för då kan du lägga till nya egenskaper

138
00:08:58,330 --> 00:09:01,920
till alla dessa JSON blobbar utan att ändra din databas.

139
00:09:01,920 --> 00:09:06,860
Enda nackdelen med det är att om du har en massa områden

140
00:09:06,860 --> 00:09:09,890
att du lagt till senare - som gömd i det JSON blob -

141
00:09:09,890 --> 00:09:12,850
då är det svårare att fråga dem i databasen.

142
00:09:12,850 --> 00:09:17,690
Till exempel, om du senare - om du hade ditt inlägg modell som vi diskuterade tidigare

143
00:09:17,690 --> 00:09:25,380
med bara författaren, mottagaren och texten -

144
00:09:25,380 --> 00:09:29,000
du kan också ha en JSON klump och sedan om du senare vill lägga till ett datumfält

145
00:09:29,000 --> 00:09:31,000
du inte skulle behöva ändra din databas.

146
00:09:31,000 --> 00:09:36,140
Du kan bara lägga till datum till alla textfält.

147
00:09:36,140 --> 00:09:39,640
Och då skulle du kunna titta på dem på klientsidan,

148
00:09:39,640 --> 00:09:42,430
men du skulle inte kunna fråga dem på serversidan

149
00:09:42,430 --> 00:09:44,430
eftersom det är gömd inuti den texten.

150
00:09:44,430 --> 00:09:49,920
>> Den andra frågan som du vill tänka på

151
00:09:49,920 --> 00:09:52,400
är hur din klient och servern kommer att kommunicera.

152
00:09:52,400 --> 00:09:56,040
Du vill oftast att hålla detta så enkelt som möjligt.

153
00:09:56,040 --> 00:10:02,230
Du kan bara ha som en get-me-begäran uppgifter,

154
00:10:02,230 --> 00:10:09,140
en skapa-en-ny-objektet sak, och en begäran om uppdatering-en-gammal-objekt.

155
00:10:09,140 --> 00:10:12,930
Och dessa skulle alla vara olika webbadresser på en server som du -

156
00:10:12,930 --> 00:10:20,030
att webbläsaren skulle - kan du använda AJAX förfrågningar för alla dessa

157
00:10:20,030 --> 00:10:24,000
och antingen ta emot eller skicka data.

158
00:10:24,000 --> 00:10:26,600
Återigen, för vår Cat Facebook exempel

159
00:10:26,600 --> 00:10:32,350
du kan ha den adressen för att få ett enskilt inlägg,

160
00:10:32,350 --> 00:10:39,750
och du skulle ha en URL för att skapa en ny vägg inlägg

161
00:10:39,750 --> 00:10:45,670
och kanske en URL för att ladda upp din profilbild, sånt.

162
00:10:45,670 --> 00:10:51,730
Men återigen, det är att i förväg hämta de flesta av dina data så att du inte behöver hålla

163
00:10:51,730 --> 00:10:53,360
göra nätverksförfrågningar.

164
00:10:53,360 --> 00:10:59,030
Därför kanske du inte vill ha den enskilde få begäran om en enda post,

165
00:10:59,030 --> 00:11:03,210
och i stället skulle du bara vill ha en get begäran om hela väggen.

166
00:11:03,210 --> 00:11:06,110
Och sedan om du försöker att hitta en balans, därför att -

167
00:11:06,110 --> 00:11:10,970
Detta kommer också att vara beroende av din ansökan.

168
00:11:10,970 --> 00:11:13,430
För om du förväntar sig att folk bara har 10 eller 20 vägg inlägg

169
00:11:13,430 --> 00:11:15,430
det kommer att bli bra.

170
00:11:15,430 --> 00:11:17,390
Men om du förväntar sig att de kommer att ha tusentals då denna begäran skulle ta för lång tid,

171
00:11:17,390 --> 00:11:23,580
och så kanske du vill lägga till ett få-alla-inlägg-sedan parameter.

172
00:11:23,580 --> 00:11:26,580
>> För alla dessa är du antagligen kommer att vilja synkronisera dina data i JSON -

173
00:11:26,580 --> 00:11:29,260
JavaScript Object Notation.

174
00:11:29,260 --> 00:11:34,600
Ganska mycket varje språk behandlar JSON mycket väl.

175
00:11:34,600 --> 00:11:40,880
JQuery har denna fina getJSON funktion som kommer att göra allt det hårda arbetet för dig.

176
00:11:40,880 --> 00:11:47,390
Och om PHP finns det också mycket fina JSON kommunikationsfunktioner.

177
00:11:47,390 --> 00:11:52,660
Så, det är nog det bästa formatet för att skicka dina modeller och tillbaka.

178
00:11:52,660 --> 00:11:56,570
>> Som ett exempel på vad vi har pratat om hittills,

179
00:11:56,570 --> 00:12:00,520
Här är ett exempel flöde för din katt Facebook-applikation.

180
00:12:00,520 --> 00:12:07,760
Det börjar med din webbläsare begär basen webbadress.

181
00:12:07,760 --> 00:12:15,470
Servern förmodligen skulle skicka över statisk HTML och en del JavaScript och CSS.

182
00:12:15,470 --> 00:12:19,170
Det är oftast bäst att inte göra någon rendering på servern.

183
00:12:19,170 --> 00:12:23,370
Du kanske inte vill -

184
00:12:23,370 --> 00:12:28,360
vad servern inte gör det kommer ner på listan av vägg inlägg

185
00:12:28,360 --> 00:12:31,120
och generera lite HTML för var och en och skicka det över.

186
00:12:31,120 --> 00:12:34,960
Det är oftast bäst att göra det på klientsidan för annars

187
00:12:34,960 --> 00:12:38,580
varje gång du vill åter rita något, måste du göra en förfrågan server.

188
00:12:38,580 --> 00:12:42,450
Och det mycket snabbt ger dig en hel del overhead.

189
00:12:42,450 --> 00:12:47,430
Det är oftast bäst att bara fartyg sänder ner statiska HTML

190
00:12:47,430 --> 00:12:50,660
och sedan JavaScript och CSS som kommer att göra rendering på klientsidan.

191
00:12:50,660 --> 00:12:56,750
Så fort det där kommer in,

192
00:12:56,750 --> 00:13:03,500
då kan du ha - i JavaScript - du kan göra förfrågningar för väggen uppgifter

193
00:13:03,500 --> 00:13:08,740
och sånt, och efter att servern är i princip bara gör databasfrågor

194
00:13:08,740 --> 00:13:10,740
och kontroll av behörigheter.

195
00:13:10,740 --> 00:13:16,690
Det enda viktiga är att den inte kan skicka över några andra användare vägg inlägg

196
00:13:16,690 --> 00:13:19,220
att du inte är tillåtet att se.

197
00:13:19,220 --> 00:13:28,050
Det kan i princip vara ett mycket tunt tillgång lager till din databas,

198
00:13:28,050 --> 00:13:32,820
och sedan alla som visar data - alla de åsikter och grejer -

199
00:13:32,820 --> 00:13:37,280
som kan hända i din webbläsare, och sedan när du vill göra ett inlägg eller något

200
00:13:37,280 --> 00:13:40,000
du bara skicka en förfrågan.

201
00:13:40,000 --> 00:13:45,350
>> Det finns också en del snygga grejer som du kan göra på toppen av detta.

202
00:13:45,350 --> 00:13:49,550
När det gäller mer specifik teknisk information,

203
00:13:49,550 --> 00:13:53,360
utvecklas i vanlig JavaScript kan vara lite smärtsamt,

204
00:13:53,360 --> 00:13:56,220
så finns det vissa bibliotek och verktyg som hjälper dig en hel del med det.

205
00:13:56,220 --> 00:14:03,690
Jag tror att ni alla säkert hört talas om jQuery som gör att göra HTML-rendering

206
00:14:03,690 --> 00:14:08,890
och manipulation mycket enklare - har massor av snygga funktioner för blekning in och ut,

207
00:14:08,890 --> 00:14:12,020
och göra zippy animationer.

208
00:14:12,020 --> 00:14:13,720
Det är också detta bibliotek heter Underscore.js.

209
00:14:13,720 --> 00:14:20,760
Den har en hel del användbara nyttofunktioner, saker som du förväntar JavaScript för att ha

210
00:14:20,760 --> 00:14:24,740
att det verkligen doesnt - saker som att blanda en matris,

211
00:14:24,740 --> 00:14:28,900
ta bort dubbletter från en lista, eller tillplatt en lista med listor.

212
00:14:28,900 --> 00:14:30,900
Detta är bara ett litet kodexempel.

213
00:14:30,900 --> 00:14:36,520
Streck har en ton av dessa fina funktioner som du önskar att du skulle ha hela tiden.

214
00:14:36,520 --> 00:14:38,840
>> Och så finns det mer 1 bibliotek som jag skulle vilja spendera lite tid på

215
00:14:38,840 --> 00:14:44,800
heter Backbone.js eftersom Backbone hjälper verkligen dig att hantera modeller på klientsidan

216
00:14:44,800 --> 00:14:47,210
och en hel del av den förvirring som kan orsaka.

217
00:14:47,210 --> 00:14:53,550
Backbone ger detta koncept av modeller och samlingar

218
00:14:53,550 --> 00:14:58,300
i JavaScript, som är i grunden precis som JavaScript-objekt

219
00:14:58,300 --> 00:15:04,900
i JavaScript-matriser, men de har händelser när du ändrar deras egenskaper.

220
00:15:04,900 --> 00:15:09,090
Precis som i JavaScript, kan du ha en händelse när en knapp blir klickade eller något

221
00:15:09,090 --> 00:15:14,800
dessa Backbone modeller och Backbone kollektioner kommer att sända saker som

222
00:15:14,800 --> 00:15:17,510
att när de byter.

223
00:15:17,510 --> 00:15:22,270
Det betyder att du bara kan skriva något sådant här kodsträng här -

224
00:15:22,270 --> 00:15:27,530
detta säger, när du lägga till något till det inlägg arrayen du rita om hela väggen.

225
00:15:27,530 --> 00:15:34,270
Och detta skulle säga när en post har flera gillar förändringar,

226
00:15:34,270 --> 00:15:38,970
du meddela användaren att någon gillade deras inlägg.

227
00:15:38,970 --> 00:15:45,210
Eller när någon egenskap hos ett inlägg ändrar du rita om inlägget.

228
00:15:45,210 --> 00:15:51,050
Saker som kommer att spara massor av komplexitet för annars

229
00:15:51,050 --> 00:15:55,440
om du inte har någon ram som detta då varje gång i din kod som du ändrar

230
00:15:55,440 --> 00:16:04,280
något om ett inlägg, skulle du komma ihåg dig själv att kalla alla gör funktioner

231
00:16:04,280 --> 00:16:07,680
och sånt, och om du ville lägga till något nytt som hände

232
00:16:07,680 --> 00:16:10,680
varje gång du ändrat ett inlägg skulle du behöva gå igenom varje rum i ditt

233
00:16:10,680 --> 00:16:14,610
kod som du ändrade ett inlägg och lägga till det nya sak.

234
00:16:14,610 --> 00:16:21,450
En ram som detta kommer att ta bort en hel del av det mellan-lager kommunikation

235
00:16:21,450 --> 00:16:28,280
som gör din kod komplexa och svåra att underhålla.

236
00:16:28,280 --> 00:16:31,170
>> Det finns lite om utsikten också.

237
00:16:31,170 --> 00:16:35,960
Jag kommer att lämna det mesta av detta till Billy eftersom de är tekniskt mycket svårt.

238
00:16:35,960 --> 00:16:43,540
Använd jQuery för dina synpunkter. Det är nästan som en nödvändighet på denna punkt.

239
00:16:43,540 --> 00:16:46,290
Det gör bara allt så mycket lättare.

240
00:16:46,290 --> 00:16:48,290
Det finns en hel del bibliotek.

241
00:16:48,290 --> 00:16:49,970
Om du har komplicerade delar av användargränssnittet,

242
00:16:49,970 --> 00:16:57,250
om du vill ha en automatisk komplettering sak eller gillar en av dessa tjusiga multiväljare -

243
00:16:57,250 --> 00:17:04,790
Om du vill ha något liknande, bör du nog bara söka runt

244
00:17:04,790 --> 00:17:08,130
och du kan hitta ett bra bibliotek som kommer att göra vad du vill.

245
00:17:08,130 --> 00:17:11,579
Billy kommer att förklara mer om de faktiskt svåra delar av åsikter.

246
00:17:11,579 --> 00:17:17,530
Också, som en liten not, har vissa funktioner för att göra vyerna kommunicera Backbone

247
00:17:17,530 --> 00:17:22,800
fint med modeller - titta på dokumentation för alla dessa bibliotek, faktiskt.

248
00:17:22,800 --> 00:17:28,270
Titta bara på docs. De är mycket välskriven och lätt att följa.

249
00:17:28,270 --> 00:17:33,890
I allmänhet kan du ganska mycket bara Google om du har problem.

250
00:17:33,890 --> 00:17:36,370
Det finns många människor som använder dem.

251
00:17:36,370 --> 00:17:42,020
Jag tror att det är som en sista anmärkning.

252
00:17:42,020 --> 00:17:48,770
>> Det finns också några mer avancerade saker som du kan göra

253
00:17:48,770 --> 00:17:53,400
om du letar efter för att göra din web app extra häftigt.

254
00:17:53,400 --> 00:17:59,760
Du kan göra - den nya HTML5-specifikationen har en massa fina saker du kan göra.

255
00:17:59,760 --> 00:18:05,780
Lokal lagring - vilket är att du kan lagra data i webbläsaren -

256
00:18:05,780 --> 00:18:09,470
i stället för att gå tillbaka och granska på servern för allt,

257
00:18:09,470 --> 00:18:12,470
du kan behålla en del av det på klienten och att till och med låter folk -

258
00:18:12,470 --> 00:18:20,850
i vissa fall kan det till och med låter dig använda webbsidan offline.

259
00:18:20,850 --> 00:18:26,980
Det är det här som kallas WebSockets som är en annan typ av nätverkskommunikation

260
00:18:26,980 --> 00:18:30,930
där istället för att bara du gör en förfrågan får du svar och du är klar,

261
00:18:30,930 --> 00:18:35,240
du håller öppna en anslutning till servern och så att du kan göra saker som

262
00:18:35,240 --> 00:18:37,240
realtidsuppdateringar.

263
00:18:37,240 --> 00:18:42,020
Så, om du försöker göra en chat app, kan du använda WebSockets

264
00:18:42,020 --> 00:18:43,790
att kommunicera fram och tillbaka så att du inte skulle behöva hålla begär,

265
00:18:43,790 --> 00:18:48,410
"Åh, server, var det någon skicka mig en pratstund?" var 10 sekunder eller något.

266
00:18:48,410 --> 00:18:55,620
Det finns också en intressant HTML5 funktion där du kan få det att se ut som

267
00:18:55,620 --> 00:18:58,340
webbadressen till sidan förändras utan att någonsin behöva faktiskt ladda om den.

268
00:18:58,340 --> 00:19:03,230
Du kan använda knapparna Bakåt och Framåt utan att göra en massa förfrågningar från nätverket.

269
00:19:03,230 --> 00:19:14,660
Sånt är verkligen användbart när det gäller att göra det snabbt, men också fungera som en web app borde.

270
00:19:14,660 --> 00:19:17,680
>> Det är också denna sak kallad CoffeeScript.

271
00:19:17,680 --> 00:19:24,450
CoffeeScript är ett annat språk, faktiskt, sammanställer det ner till JavaScript.

272
00:19:24,450 --> 00:19:30,080
Du skulle skriva all kod i CoffeeScript, och sedan kör denna kompilator,

273
00:19:30,080 --> 00:19:33,300
och den spottar ut en JavaScript-fil som du kan inkludera i din webbsida.

274
00:19:33,300 --> 00:19:38,860
Anledningen till att CoffeeScript är trevligt är att det tar bort en hel del av

275
00:19:38,860 --> 00:19:44,760
konstiga fall att JavaScript har var lika jämlikar,

276
00:19:44,760 --> 00:19:51,130
och lika likar gör olika saker, eller vilja -

277
00:19:51,130 --> 00:19:55,740
den har trevligare syntax för att hantera arrayer och funktioner.

278
00:19:55,740 --> 00:20:00,460
Detta är en liten snutt av CoffeeScript som producerar en lista på alla rutor

279
00:20:00,460 --> 00:20:04,900
från 10 ^ 2-1 ^ 2 i omvänd ordning.

280
00:20:04,900 --> 00:20:08,410
Som ni ser, låter CoffeeScript ofta du uttrycka i 1 rad

281
00:20:08,410 --> 00:20:10,890
vad skulle ta fem rader JavaScript.

282
00:20:10,890 --> 00:20:13,230
Det kan göra saker och ting mycket enklare.

283
00:20:13,230 --> 00:20:15,390
Det är en liten bit av ny syntax för att lära sig i början,

284
00:20:15,390 --> 00:20:18,010
men det definitivt kommer att göra dig mer produktiv i det långa loppet.

285
00:20:18,010 --> 00:20:22,050
>> Du kan även använda andra språk på servern än PHP -

286
00:20:22,050 --> 00:20:27,570
språk som Ruby, Python, eller det finns även ett projekt kallat node.js

287
00:20:27,570 --> 00:20:31,450
som låter dig använda JavaScript på servern.

288
00:20:31,450 --> 00:20:34,700
Personligen är jag verkligen, verkligen hatar PHP.

289
00:20:34,700 --> 00:20:38,310
Jag bara inte tycker om att arbeta med det.

290
00:20:38,310 --> 00:20:43,450
Om du också tycker att det är ett fruktansvärt cluge av ett språk,

291
00:20:43,450 --> 00:20:46,160
då kan du använda en av dessa i stället.

292
00:20:46,160 --> 00:20:54,780
Generellt gäller att om du vill göra något och du vet inte riktigt hur du skulle göra det,

293
00:20:54,780 --> 00:20:56,780
bara söka på Internet.

294
00:20:56,780 --> 00:20:59,990
Det finns massor och massor av resurser, särskilt om -

295
00:20:59,990 --> 00:21:03,260
Stackoverflow är en stor en.

296
00:21:03,260 --> 00:21:06,400
Det är denna webbplats där programmerare ställa frågor till varandra.

297
00:21:06,400 --> 00:21:09,690
Du kanske har stött på det om du hade problem på CS50 problemsamlingar.

298
00:21:09,690 --> 00:21:16,820
Och det finns massor av bibliotek för att göra i stort sett allt du vill.

299
00:21:16,820 --> 00:21:21,710
Om du vill göra något och du inte vet hur man gör det,

300
00:21:21,710 --> 00:21:23,710
ta inte för givet att det är omöjligt.

301
00:21:23,710 --> 00:21:26,160
Se dig omkring och du kan hitta några bra resurser.

302
00:21:26,160 --> 00:21:29,280
>> Som en allmän avsluta,

303
00:21:29,280 --> 00:21:33,650
de viktigaste hämtställen är att hålla det enkelt.

304
00:21:33,650 --> 00:21:36,010
Ju mer komplexa koden är i början

305
00:21:36,010 --> 00:21:40,370
och ju mer du försöker och gör snygga grejer,

306
00:21:40,370 --> 00:21:43,300
desto längre tid tar det att få något som faktiskt fungerar

307
00:21:43,300 --> 00:21:46,480
och desto svårare blir det att ändra senare.

308
00:21:46,480 --> 00:21:49,580
Så, gör saker den stumma, enkelt sätt först.

309
00:21:49,580 --> 00:21:51,720
För att gå med på det,

310
00:21:51,720 --> 00:21:59,070
var inte rädd för att kasta bort gamla koden eller städa upp en hel del.

311
00:21:59,070 --> 00:22:05,320
Generellt, när du faktiskt har något arbete,

312
00:22:05,320 --> 00:22:09,640
det är mycket lättare att tänka på än när du är fortfarande i början stadier

313
00:22:09,640 --> 00:22:12,610
om hur jag sätter detta alla tillsammans.

314
00:22:12,610 --> 00:22:17,500
Det är bäst att göra det dummaste möjliga design som fungerar

315
00:22:17,500 --> 00:22:22,270
och sedan förbättra det iterativt än att försöka få allt rätt första gången.

316
00:22:22,270 --> 00:22:28,330
När det gäller klientserverdivision, försöka hålla din server mycket enkel -

317
00:22:28,330 --> 00:22:33,030
bara en databas och en del autentisering och inte gör något hårt arbete där.

318
00:22:33,030 --> 00:22:37,540
Gör alla dina komplicerade saker på klientsidan i webbläsaren

319
00:22:37,540 --> 00:22:40,650
i JavaScript så mycket du kan.

320
00:22:40,650 --> 00:22:43,420
Titta runt för bibliotek som gör ditt liv bättre.

321
00:22:43,420 --> 00:22:46,850
Alltid bättre att använda kod som någon annan skrev

322
00:22:46,850 --> 00:22:49,850
om du - och inte för att skriva det själv.

323
00:22:49,850 --> 00:22:57,560
Det finns en massa saker på Internet. Google är din bästa vän.

324
00:22:57,560 --> 00:22:59,560
Google är programmerarens bästa vän.

325
00:22:59,560 --> 00:23:07,620
Ja, definitivt inte rädd för att titta runt efter saker.

326
00:23:07,620 --> 00:23:11,860
Okej. Och över till Billy.

327
00:23:11,860 --> 00:23:14,600
>> [Billy] Egentligen, innan jag börjar med någon konstruktion grejer,

328
00:23:14,600 --> 00:23:17,250
är det någon som har några frågor till Ben om något som han talade om?

329
00:23:17,250 --> 00:23:20,290
Okej, bra.

330
00:23:20,290 --> 00:23:22,220
Återigen, låt oss veta om något är oklart

331
00:23:22,220 --> 00:23:25,420
eller om du vill att vi ska gå över något lite mer.

332
00:23:25,420 --> 00:23:30,330
Jag kommer att gå tillbaka lite och prata om de mer grundläggande delarna av design.

333
00:23:30,330 --> 00:23:34,840
Ben nämnde modellen heter - sorry, modellen controller view-system

334
00:23:34,840 --> 00:23:38,520
som är typ av den tekniska aspekten, så jag kommer att titta på utsikten specifikt,

335
00:23:38,520 --> 00:23:42,930
och jag ska börja med hur du skulle utforma en vy som ser bra ut.

336
00:23:42,930 --> 00:23:50,540
Här är lite av en riktigt grundläggande mall för vår katt Facebook.

337
00:23:50,540 --> 00:23:54,190
Jag tror att det finns vissa grundprinciper i modern gränssnittsdesign

338
00:23:54,190 --> 00:23:56,190
som är värt att plocka upp.

339
00:23:56,190 --> 00:23:58,210
Du kan märka att det finns en hel del tomt utrymme över hela sidan,

340
00:23:58,210 --> 00:24:00,790
gott om utrymme för saker.

341
00:24:00,790 --> 00:24:02,580
Inte känna att du måste squash saker i en sida.

342
00:24:02,580 --> 00:24:06,700
Du vill lämna gott om plats öppen, och om du går till nästan alla moderna hemsida

343
00:24:06,700 --> 00:24:08,380
ser du att det finns vitt överallt.

344
00:24:08,380 --> 00:24:10,380
Det är vitt på platser som du inte förväntar dig.

345
00:24:10,380 --> 00:24:14,570
Du har denna färgpalett, och det är klokt i början

346
00:24:14,570 --> 00:24:17,880
att välja en färgpalett som du kommer att arbeta med och utveckla.

347
00:24:17,880 --> 00:24:22,250
Du också - det hjälper till att välja ett typsnitt, och på det sättet du är sorts arbetar med

348
00:24:22,250 --> 00:24:24,450
dessa konkreta grunderna i design.

349
00:24:24,450 --> 00:24:26,910
Du har din typ, du har dina färger, och sedan kan du slags

350
00:24:26,910 --> 00:24:29,380
passar allt annat i så behövs.

351
00:24:29,380 --> 00:24:37,710
Så, som sagt, med din färgschema du vill använda de djärvare färgerna i ditt färgschema

352
00:24:37,710 --> 00:24:40,320
sparsamt. Rubriker är trevliga. Knappar är trevligt att ha riktigt stora, flashiga färger.

353
00:24:40,320 --> 00:24:43,710
Men i allmänhet, om du har en webbplats som har färger överallt,

354
00:24:43,710 --> 00:24:47,250
alla stirrar dig i ansiktet, det bara ser rörigt, och det är inte bra.

355
00:24:47,250 --> 00:24:50,430
Du vill i allmänhet använda ljusa färger.

356
00:24:50,430 --> 00:24:52,890
Försök att, återigen, plocka en ganska enhetlig färgschema.

357
00:24:52,890 --> 00:24:56,640
Du kan ha med små stänk av massor av färg -

358
00:24:56,640 --> 00:25:00,240
som kan se ganska trevligt, men du vill använda dem ganska sparsamt.

359
00:25:00,240 --> 00:25:04,270
>> Som jag sa, du vill vara minimal. Mindre är nästan alltid mer.

360
00:25:04,270 --> 00:25:07,430
Om du kan visa något eller inte visa något,

361
00:25:07,430 --> 00:25:10,230
och du är typ av osäkra på om det ska vara där som standard -

362
00:25:10,230 --> 00:25:13,400
förmodligen är du bäst av att lämna ut den. Du kan alltid lägga till det senare.

363
00:25:13,400 --> 00:25:16,620
Ja, hålla det enkelt.

364
00:25:16,620 --> 00:25:19,510
Men viktigast av allt, vill du överväga flera mönster.

365
00:25:19,510 --> 00:25:23,520
Tro inte att när du gör en hemsida, har du det i ditt huvud att du kommer att

366
00:25:23,520 --> 00:25:26,310
göra området på ett visst sätt, och det kommer att se ut exakt så här.

367
00:25:26,310 --> 00:25:29,830
Det kommer att ha den blå sidhuvudet längst upp och den blå sidofältet

368
00:25:29,830 --> 00:25:32,670
och sedan den gula sub-header sak.

369
00:25:32,670 --> 00:25:34,670
Du vill göra flera mallar.

370
00:25:34,670 --> 00:25:37,350
Du kan antingen - om du är bra med Photo Shop, kan du öppna upp och liksom

371
00:25:37,350 --> 00:25:39,600
designa en hemsida som du vill att det ska se.

372
00:25:39,600 --> 00:25:41,680
Om inte, kan du bara använda papper och penna,

373
00:25:41,680 --> 00:25:44,000
men repa upp flera mönster.

374
00:25:44,000 --> 00:25:47,000
Du vill i princip ha en uppsättning upp där du har massor av olika utföranden,

375
00:25:47,000 --> 00:25:50,810
och om man slutar arbeta, så är det bra.

376
00:25:50,810 --> 00:25:53,370
Om man hamnar misslyckas, då har du alltid en annan att vända sig till.

377
00:25:53,370 --> 00:25:57,960
I allmänhet inte känner för att du ska begränsas

378
00:25:57,960 --> 00:26:00,830
till vad design du först besluta om.

379
00:26:00,830 --> 00:26:04,420
Ringar är mycket variabel, och en del av vikten av modellen

380
00:26:04,420 --> 00:26:09,480
controller view-system är att du kan byta in och ut olika vyer som du vill ha.

381
00:26:09,480 --> 00:26:13,510
Du kan svänga datan ett sätt, och sedan bestämma, åh, faktiskt, som inte fungerar så bra.

382
00:26:13,510 --> 00:26:19,190
Jag tycker det är lite för komplicerat eller det finns en del här som inte verkligen fungerar,

383
00:26:19,190 --> 00:26:22,150
så jag ska bara helt överge denna uppfattning och swap på en helt ny.

384
00:26:22,150 --> 00:26:24,790
Vi kan fortfarande använda de gamla modellerna och de gamla styrenheter.

385
00:26:24,790 --> 00:26:27,490
Vi kan göra allt på servern och klienten som vi skulle innan.

386
00:26:27,490 --> 00:26:32,850
Men själva vågen av de data som visas kommer att vara något annorlunda.

387
00:26:32,850 --> 00:26:35,840
>> Så långt som att faktiskt genomföra den design som du vill,

388
00:26:35,840 --> 00:26:39,330
när du har några mönster skiss på papper eller på Photo Shop eller vad som helst,

389
00:26:39,330 --> 00:26:42,120
det finns ett antal verktyg som görs tillgängliga för dig.

390
00:26:42,120 --> 00:26:45,700
Det första du är väl förtrogen med vilken är din HTML, PHP, eller vad

391
00:26:45,700 --> 00:26:48,990
språk du använder bara för att koda de statiska sidor på din webbplats.

392
00:26:48,990 --> 00:26:51,990
Du har arbetat mycket med HTML vilket slags ger dig dessa taggar

393
00:26:51,990 --> 00:26:57,820
att du kan sätta saker i, och i grunden är det ett sätt att organisera ditt innehåll.

394
00:26:57,820 --> 00:27:00,990
Till exempel, du har huvudet uppe, så du kommer att ha en rubrik tagg,

395
00:27:00,990 --> 00:27:05,770
och det kommer att ha någon text på insidan av det som förmodligen kommer att vara i en annan tagg.

396
00:27:05,770 --> 00:27:08,380
Då har du en sidebar kanske med några olika länkar,

397
00:27:08,380 --> 00:27:10,160
och de som kommer att alla vara i separata taggar.

398
00:27:10,160 --> 00:27:13,870
Så i princip HTML i centrum är ett sätt att dela upp sidan hur

399
00:27:13,870 --> 00:27:16,980
du så småningom vill formatera den.

400
00:27:16,980 --> 00:27:18,980
Så återigen, har du sett det tidigare.

401
00:27:18,980 --> 00:27:20,540
Du är ganska bekväm med att arbeta med det nu

402
00:27:20,540 --> 00:27:23,120
med tanke på att du har gjort det sista pset förhoppningsvis,

403
00:27:23,120 --> 00:27:26,150
så det borde inte vara några problem.

404
00:27:26,150 --> 00:27:31,280
>> Då har du CSS som i princip hanterar alla de design statiska aspekter.

405
00:27:31,280 --> 00:27:35,320
Det skulle hantera alla de färger, som alla placeringen av olika element,

406
00:27:35,320 --> 00:27:36,840
där de går i förhållande till en annan,

407
00:27:36,840 --> 00:27:41,530
hur stora de är, de olika typer av positioneringar som du vill ha -

408
00:27:41,530 --> 00:27:46,030
med andra ord, kan du ha saker fast så att när du bläddra ner de stannar,

409
00:27:46,030 --> 00:27:48,700
eller så kan du ha saker i förhållande till andra element.

410
00:27:48,700 --> 00:27:50,730
Allt sånt är i CSS.

411
00:27:50,730 --> 00:27:54,630
Dessutom kan du göra olika dekorationer, kan du ha textfärger,

412
00:27:54,630 --> 00:27:56,630
texteffekter, alla såna saker.

413
00:27:56,630 --> 00:28:00,360
Ben gav ett riktigt bra seminarium om detta förra helgen,

414
00:28:00,360 --> 00:28:04,450
och så skulle jag definitivt kolla att om du planerar att göra några snygga saker med CSS.

415
00:28:04,450 --> 00:28:09,850
CSS3 är faktiskt den nyaste versionen av CSS, och det kan göra alla möjliga riktigt fina saker.

416
00:28:09,850 --> 00:28:14,750
Det kan göra övertoningar, du kan ha fina, rundade hörn, du kan göra alla möjliga saker

417
00:28:14,750 --> 00:28:17,940
att göra din webbplats ser mer moderna och snygga.

418
00:28:17,940 --> 00:28:22,150
>> Nästa verktyg är JavaScript och jQuery som Ben pratade lite om,

419
00:28:22,150 --> 00:28:24,150
men jag får en lite längre in.

420
00:28:24,150 --> 00:28:28,100
JavaScript, som du har arbetat med det lite, eller åtminstone sett det i föreläsning,

421
00:28:28,100 --> 00:28:31,870
är lite av ett sätt att dynamiskt göra saker i HTML.

422
00:28:31,870 --> 00:28:35,950
HTML, som ni vet, är statisk, så när du har HTML du inte kan ändra det.

423
00:28:35,950 --> 00:28:40,050
Men JavaScript, på vissa sätt, är ett sätt att kunna modifiera HTML.

424
00:28:40,050 --> 00:28:44,520
Så du kan göra det, och det är bra, men JavaScript är verkligen jobbigt att arbeta med.

425
00:28:44,520 --> 00:28:49,050
Det är så lång och trubbig och att göra ens de enklaste saker

426
00:28:49,050 --> 00:28:51,630
kräver massor av rader av JavaScript.

427
00:28:51,630 --> 00:28:55,410
Så, är jQuery grunden ett bibliotek för JavaScript som förenklar allt detta.

428
00:28:55,410 --> 00:28:59,880
Den säger, okej, om du vill ha en fyrkantig låda kommer från vänster

429
00:28:59,880 --> 00:29:03,980
och tona in på sidan så att det är i mitten, i JavaScript som skulle ta -

430
00:29:03,980 --> 00:29:06,340
Jag vet inte, hundra rader för att göra, och det skulle vara en smärta,

431
00:29:06,340 --> 00:29:10,540
och du kommer ut ur det hata allt om webbprogrammering.

432
00:29:10,540 --> 00:29:15,380
JQuery du i princip ha elementet-dot-fade-in, eller något liknande.

433
00:29:15,380 --> 00:29:18,580
Så, mycket, mycket enkla funktioner som låter dig göra alla typer av häftiga animationer

434
00:29:18,580 --> 00:29:20,580
och sånt.

435
00:29:20,580 --> 00:29:23,300
Den andra saken som dessa två är riktigt bra för är att bara göra dynamiska saker

436
00:29:23,300 --> 00:29:25,300
med webbplatsen.

437
00:29:25,300 --> 00:29:28,370
Så, istället för att bara ha din HTML-sida - som visar vissa uppgifter, men inte egentligen

438
00:29:28,370 --> 00:29:32,130
göra vad som helst - JavaScript och jQuery kommer att låta dig få knappar som du kan klicka på,

439
00:29:32,130 --> 00:29:37,960
och du kan dra element och åter ordning dem och sortera dem, och få nya element

440
00:29:37,960 --> 00:29:40,500
till eller tas bort. Du kan lägga till-delete, den sortens saker.

441
00:29:40,500 --> 00:29:44,570
Så, jQuery gör massor av coola saker.

442
00:29:44,570 --> 00:29:48,840
Och Vipul faktiskt ger ett seminarium om det i dag, tror jag, vid 5-klockan,

443
00:29:48,840 --> 00:29:51,220
så om du kan stanna kvar så länge, skulle det - 5 eller 4?

444
00:29:51,220 --> 00:29:54,930
Fyra. Ursäkta. Det är faktiskt direkt efter detta, så jag skulle rekommendera

445
00:29:54,930 --> 00:29:56,680
hålla sig runt för det om du kan.

446
00:29:56,680 --> 00:30:00,180
JQuery är super, super bra, och du kommer att kunna göra massor av riktigt fina saker med det

447
00:30:00,180 --> 00:30:03,460
för ganska mycket varje webbutveckling projekt.

448
00:30:03,460 --> 00:30:06,200
>> Nu ska jag komma in i form av en skillnad.

449
00:30:06,200 --> 00:30:08,210
Jag har pratat i grunden om användargränssnitt.

450
00:30:08,210 --> 00:30:11,510
Användargränssnittet är bara utformningen av webbplatsen.

451
00:30:11,510 --> 00:30:13,780
Men det blir liksom ett annat begrepp som är användarupplevelsen.

452
00:30:13,780 --> 00:30:15,900
De två är mycket olika.

453
00:30:15,900 --> 00:30:19,440
Interface är definitivt en del av upplevelsen.

454
00:30:19,440 --> 00:30:21,340
Med andra ord, när du går till en webbplats, du ser på gränssnittet.

455
00:30:21,340 --> 00:30:22,960
Det är en del av hur du upplever webbplatsen.

456
00:30:22,960 --> 00:30:24,960
Men användarupplevelsen är mer än så.

457
00:30:24,960 --> 00:30:29,910
Användarupplevelsen är vad intrycket att användaren får från din webbplats är.

458
00:30:29,910 --> 00:30:31,910
Så, naturligtvis, är gränssnittet en del av detta.

459
00:30:31,910 --> 00:30:35,340
Och det är definitivt en nödvändig del, men det är inte tillräckligt.

460
00:30:35,340 --> 00:30:38,790
Med andra ord, om du har ett trevligt gränssnitt, och det är ganska och färgstark och allt detta,

461
00:30:38,790 --> 00:30:43,650
det är bra, men om användaren går till din webbplats, ser en vacker layout och det är förvirrad av

462
00:30:43,650 --> 00:30:47,060
allt, har ingen aning om hur man gör något, uppenbarligen så har du gjort en riktigt

463
00:30:47,060 --> 00:30:48,930
dålig hemsida.

464
00:30:48,930 --> 00:30:50,930
Det blir liksom där användarupplevelse kommer in

465
00:30:50,930 --> 00:30:54,570
Jag ska prata lite om UX designen - UX står för användarupplevelse -

466
00:30:54,570 --> 00:30:58,050
och typ hur man kan se till att du har en bra användarupplevelse.

467
00:30:58,050 --> 00:31:04,330
Den första punkten är att du kan designa en hemsida där en användare kan göra något som

468
00:31:04,330 --> 00:31:06,820
att användaren eventuellt vill.

469
00:31:06,820 --> 00:31:08,940
Men om användaren inte kan lista ut hur man gör dessa saker -

470
00:31:08,940 --> 00:31:12,850
med andra ord, om användaren inte har en bra idé när de går till din webbplats på,

471
00:31:12,850 --> 00:31:17,660
"Åh, om jag vill uppdatera min profil, klicka jag på den här knappen, eller om jag vill lägga upp på

472
00:31:17,660 --> 00:31:20,850
någons vägg, då går jag till deras vägg och klicka på en liten låda. "

473
00:31:20,850 --> 00:31:24,410
Om användaren inte vet att, då du faktiskt har faktiskt inte

474
00:31:24,410 --> 00:31:27,080
genomfört denna funktion korrekt.

475
00:31:27,080 --> 00:31:30,900
En del av att genomföra en funktion är att användarna faktiskt kan använda den.

476
00:31:30,900 --> 00:31:34,810
Och det kan vara frustrerande - du kan göra en sida, och det kan göra alla typer av

477
00:31:34,810 --> 00:31:37,810
underbara saker, men då har du folk testa den och säga: "Det kan inte göra det här.

478
00:31:37,810 --> 00:31:39,770
Varför kan man inte göra det? "Och du kommer att säga till dem,

479
00:31:39,770 --> 00:31:44,420
"Ja, det kan. Det är bara att gå in i den 7: e rullgardinsmenyn på denna obskyra

480
00:31:44,420 --> 00:31:48,470
sida som bara hittas av en länk längst ned till höger "eller något.

481
00:31:48,470 --> 00:31:50,430
Självklart vill du inte det.

482
00:31:50,430 --> 00:31:53,420
Du vill att det ska vara klart för användarna vad de ska göra,

483
00:31:53,420 --> 00:31:56,240
och det bör vara enkelt och intuitivt för dem.

484
00:31:56,240 --> 00:32:01,180
>> En annan sak som du vill försöka göra är att, om någon kommer att gå till din webbplats

485
00:32:01,180 --> 00:32:05,520
och 9 av 10 gånger gör handling A, och 1 av 10 gånger gör handling B,

486
00:32:05,520 --> 00:32:08,950
du förmodligen vill fokusera sina erfarenheter om åtgärder A.

487
00:32:08,950 --> 00:32:12,240
Med andra ord, vill du göra det väldigt, väldigt tydligt hur man gör A.

488
00:32:12,240 --> 00:32:15,980
En bör vara front-och center - gå till platsen, ser det, åh, det är just där.

489
00:32:15,980 --> 00:32:20,850
Av följande skäl B uppenbarligen du vill vara tydlig, men du kan lämna det lite mer

490
00:32:20,850 --> 00:32:22,850
i bakgrunden.

491
00:32:22,850 --> 00:32:24,640
David ger ett bra exempel på detta i föreläsning,

492
00:32:24,640 --> 00:32:26,640
vilket är det Boston T-systemet.

493
00:32:26,640 --> 00:32:29,440
När du går till Boston T och du vill köpa en biljett,

494
00:32:29,440 --> 00:32:32,700
du måste komma in i fem menyer innan du faktiskt kan köpa en biljett

495
00:32:32,700 --> 00:32:37,130
för en $ 2, $ 2,50 värde, vilket är hur mycket det tar att åka tunnelbana

496
00:32:37,130 --> 00:32:39,130
i en riktning.

497
00:32:39,130 --> 00:32:41,600
Det är ett problem eftersom de flesta människor som rider tunnelbanan

498
00:32:41,600 --> 00:32:44,880
förmodligen bara vill gå till ett ställe, köper sin biljett, komma på direkt.

499
00:32:44,880 --> 00:32:47,550
Det är inte rimligt att de måste gå igenom massor av olika menyer

500
00:32:47,550 --> 00:32:49,550
att komma dit.

501
00:32:49,550 --> 00:32:51,760
En bättre användarupplevelse skulle vara en snabb knapp på första sidan

502
00:32:51,760 --> 00:32:54,760
som bara säger, "köpa en enkelbiljett," och som skulle sätta in alla standard

503
00:32:54,760 --> 00:32:58,550
standardvärden, och sedan om någon vill köpa en annan biljett än så,

504
00:32:58,550 --> 00:33:01,690
de fortfarande, naturligtvis, har möjlighet till, men du har optimerat för

505
00:33:01,690 --> 00:33:04,080
gemensam användning fall som verkligen är viktigt.

506
00:33:04,080 --> 00:33:06,830
Du kan se exempel på detta på Facebook, eller hur?

507
00:33:06,830 --> 00:33:09,410
Om du går till Facebook och du vill lägga upp en status,

508
00:33:09,410 --> 00:33:11,710
det är högst upp vilket är vad du ofta vill göra.

509
00:33:11,710 --> 00:33:14,730
Så fort du kommer in på sidan, kan du göra de vanligaste sakerna som

510
00:33:14,730 --> 00:33:16,730
du vill göra.

511
00:33:16,730 --> 00:33:17,550
Om du vill göra något mer komplicerade saker som,

512
00:33:17,550 --> 00:33:21,070
säga att jag vill åka till min kompis vägg och lägga upp en bild på den -

513
00:33:21,070 --> 00:33:24,810
som jag kommer att vilja göra ofta, men inte så ofta som att publicera statusuppdateringar -

514
00:33:24,810 --> 00:33:28,200
så i så fall, jag skriver deras namn i rutan högst upp, klicka på deras profil,

515
00:33:28,200 --> 00:33:31,680
och sedan, ändå är det högst upp där när jag har fått till sin profil.

516
00:33:31,680 --> 00:33:38,240
Återigen har jag optimerat i prioritet för de fall de vanligaste användningsområden.

517
00:33:38,240 --> 00:33:41,800
>> En annan viktig sak är att ofta människor kommer slags försök att komma runt detta

518
00:33:41,800 --> 00:33:44,890
genom att säga, okej, så jag har gjort på platsen och människor finner det förvirrande,

519
00:33:44,890 --> 00:33:46,110
och det är ett problem, eller hur?

520
00:33:46,110 --> 00:33:49,210
Självklart vill jag inte att folk ska bli förvirrade av innehållet på min webbplats.

521
00:33:49,210 --> 00:33:53,210
Men sättet att lösa det är att inte ha något dyker upp säger,

522
00:33:53,210 --> 00:33:55,290
hej, jag ska lära dig hur du använder denna webbplats.

523
00:33:55,290 --> 00:33:58,130
Steg 1 - klicka på denna knapp. Steg 2 - gå hit.

524
00:33:58,130 --> 00:34:03,080
Visst, det är en väg runt det - det är ett sätt att du kan tala om för folk vad de ska göra, men det är

525
00:34:03,080 --> 00:34:05,080
egentligen inte det optimala sättet.

526
00:34:05,080 --> 00:34:07,420
Om jag går till en webbplats, och plötsligt jag bombarderas med den här guiden som talar för mig

527
00:34:07,420 --> 00:34:11,739
vad man ska göra och vart man ska gå och allt det där, det är inte roligt för mig.

528
00:34:11,739 --> 00:34:13,739
Det är inte en bra erfarenhet för mig.

529
00:34:13,739 --> 00:34:17,130
Det är lite av en smärta. Jag vill bara börja göra saker.

530
00:34:17,130 --> 00:34:19,449
Folk kommer att stänga av deras dialogrutan

531
00:34:19,449 --> 00:34:23,580
eller få ut av läraren, inte vet vad de ska göra, och sedan klaga eftersom

532
00:34:23,580 --> 00:34:25,580
du inte har berättat för dem vad de ska göra.

533
00:34:25,580 --> 00:34:29,530
Sättet att lösa detta är inte genom att ge någon form av handledning eller riktningar -

534
00:34:29,530 --> 00:34:31,530
något liknande.

535
00:34:31,530 --> 00:34:33,719
Så mycket som du kan undvika det, du verkligen vill visa användaren vad som ska göras

536
00:34:33,719 --> 00:34:36,429
bara genom den typ av hur webbplatsen är anlagd.

537
00:34:36,429 --> 00:34:39,090
Med andra ord, om jag går till Facebook utan att logga in,

538
00:34:39,090 --> 00:34:40,920
det första som jag ser på huvudsidan -

539
00:34:40,920 --> 00:34:44,480
det är lite inloggningsruta. Så, duh. Jag måste logga in Det är rätt där.

540
00:34:44,480 --> 00:34:48,030
För om jag gick till Facebook och jag var tvungen att klicka på en liten länk längst ner

541
00:34:48,030 --> 00:34:51,920
som sade att "logga in" och resten av sidan var bara någon slags bild eller något,

542
00:34:51,920 --> 00:34:54,820
Jag skulle inte riktigt vad jag ska göra, eller hur? Jag skulle förväxlas.

543
00:34:54,820 --> 00:34:58,590
Så skulle det kunna tala om för mig att gå dit ner och klicka på knappen för att logga in,

544
00:34:58,590 --> 00:35:01,080
eller inloggningsknappen kan vara högst upp där jag ska se det.

545
00:35:01,080 --> 00:35:04,780
Du vill alltid att visa användaren vad som ska göras,

546
00:35:04,780 --> 00:35:06,750
och det borde vara inneboende i själva sidan.

547
00:35:06,750 --> 00:35:09,880
>> När du funderar på mönster och hånar upp olika sätt att

548
00:35:09,880 --> 00:35:13,810
uttrycka din webbplats, vill du verkligen att tänka på vad användarna kommer att

549
00:35:13,810 --> 00:35:19,380
göra och hur du kan visa dem vad de ska göra.

550
00:35:19,380 --> 00:35:23,530
En sista sak är att testa är riktigt, riktigt viktigt.

551
00:35:23,530 --> 00:35:27,400
Det är bra att få någon - få en vän, få någon som du inte vet ens -

552
00:35:27,400 --> 00:35:30,420
som aldrig sett platsen innan för att använda webbplatsen.

553
00:35:30,420 --> 00:35:33,650
Därför att du har arbetat på plats i timmar, du har stirrat på den,

554
00:35:33,650 --> 00:35:36,670
och du vet exakt vad du ska göra så uppenbart att du kommer att kunna testa

555
00:35:36,670 --> 00:35:39,520
saker som du har arbetat med och att du vet arbete.

556
00:35:39,520 --> 00:35:42,680
Men om någon annan kommer och använder sajten som aldrig har använt det tidigare,

557
00:35:42,680 --> 00:35:46,880
det är en unik upplevelse för att du har någon som inte har någon tidigare kunskap

558
00:35:46,880 --> 00:35:51,530
av platsen går in i den, så de kommer att ha ett effektivt ingen aning om vad jag ska göra

559
00:35:51,530 --> 00:35:54,890
eller vilken typ av användningsfall är närvarande för dem.

560
00:35:54,890 --> 00:36:00,930
Det är bra. Det är unika eftersom de är i grunden en person med en tomt för en själ.

561
00:36:00,930 --> 00:36:03,750
De kan berätta om något är förvirrande eller oklart.

562
00:36:03,750 --> 00:36:07,580
De kan ge dig en uppfattning om exakt hur användarens upplevelse av din webbplats är.

563
00:36:07,580 --> 00:36:10,630
Det kan vara väldigt svårt att säga det själv, så definitivt skulle jag uppmuntra dig

564
00:36:10,630 --> 00:36:13,640
som du utvecklar dina projekt - om du gör webbaserade projekt -

565
00:36:13,640 --> 00:36:18,290
att få folk att använda webbplatsen så tidigt som du har någon form av fungerande demo.

566
00:36:18,290 --> 00:36:25,330
>> Nu ska jag prata lite om hur man ska hantera ett webbutvecklingsprojekt.

567
00:36:25,330 --> 00:36:28,900
Vi har gått igenom hur man kan göra den tekniska back-end sidan,

568
00:36:28,900 --> 00:36:31,050
hur man kan utforma en riktigt bra plats,

569
00:36:31,050 --> 00:36:34,150
och det är bra om du arbetar själv men -

570
00:36:34,150 --> 00:36:37,300
även om du arbetar själv och speciellt om du arbetar på ett lag,

571
00:36:37,300 --> 00:36:39,580
projektledning blir en stor fråga.

572
00:36:39,580 --> 00:36:42,340
Du har sorts hört om projektledning i olika former sedan

573
00:36:42,340 --> 00:36:45,410
grundskolan när du fick höra grupparbete.

574
00:36:45,410 --> 00:36:46,820
Du måste samarbeta, kommunicera, allt detta.

575
00:36:46,820 --> 00:36:49,620
Det gäller alla fortfarande här, men det finns några unika förutsättningar med

576
00:36:49,620 --> 00:36:54,910
datavetenskap som du vill vara medveten om, och du vill vara säker på att du hanterar väl.

577
00:36:54,910 --> 00:36:58,050
Jag ska prata först lite om det lag som du ska vara i.

578
00:36:58,050 --> 00:37:03,280
Det är mycket viktigt att välja rätt storlek i ett team som arbetar med,

579
00:37:03,280 --> 00:37:05,890
och i ditt slutprojekt jag tror att du har möjlighet att välja

580
00:37:05,890 --> 00:37:08,610
mellan 1 och 4 personer, om jag är rätt.

581
00:37:08,610 --> 00:37:12,050
Du vill se till att du inte bara ska välja det antal personer

582
00:37:12,050 --> 00:37:14,950
som du vill arbeta med, eftersom de är dina vänner.

583
00:37:14,950 --> 00:37:18,170
Du vill välja ett lag som är en bra storlek och som kommer att få jobbet gjort.

584
00:37:18,170 --> 00:37:22,700
Det finns en avvägning i att ha fler människor kontra mindre folk.

585
00:37:22,700 --> 00:37:25,320
Om du har fler människor, kan uppenbarligen mer arbete göras

586
00:37:25,320 --> 00:37:28,450
eftersom du har massor av folk, massor av kod, massor av idéer,

587
00:37:28,450 --> 00:37:29,870
och det är allt bra.

588
00:37:29,870 --> 00:37:32,590
Men det kräver också mycket mer hantering och mycket mer kommunikation.

589
00:37:32,590 --> 00:37:34,720
Med andra ord, om du har 4 personer som arbetar med samma projekt

590
00:37:34,720 --> 00:37:39,200
och de är alla redigerar samma kod, mer eller mindre de alla slags behov av att veta

591
00:37:39,200 --> 00:37:40,920
vad som händer så det kräver att du -

592
00:37:40,920 --> 00:37:44,580
Om du lägger till några nya funktion du liksom måste berätta - jag lägger till detta,

593
00:37:44,580 --> 00:37:48,510
Jag ändrar det på det här sättet - speciellt om du kommer in i riktigt djupa grejer

594
00:37:48,510 --> 00:37:52,730
liksom de modeller och de styrenheter som faktiskt går att påverka hur webbplatsen fungerar.

595
00:37:52,730 --> 00:37:54,500
Hela laget måste vara medveten om det,

596
00:37:54,500 --> 00:37:58,140
så du måste se till att du inte ska välja för stort ett lag som kommer att bli hård

597
00:37:58,140 --> 00:37:59,970
att göra denna kommunikation.

598
00:37:59,970 --> 00:38:02,930
Du vill inte heller att välja en så liten grupp som du inte kommer att

599
00:38:02,930 --> 00:38:06,250
kunna kommunicera eftersom det är bara du.

600
00:38:06,250 --> 00:38:11,270
>> En annan sak att tänka på är balansen där människors kompetens är.

601
00:38:11,270 --> 00:38:14,350
Det är bra om du är alla riktigt bra programmerare.

602
00:38:14,350 --> 00:38:17,050
Men om du är alla back-end människor, då din webbplats kommer inte att se mycket bra

603
00:38:17,050 --> 00:38:20,860
eftersom du har denna stora databas, och det gör det supersnabba sökfrågor -

604
00:38:20,860 --> 00:38:26,130
vilket är bra - men när du går till det, det är som en 1990: s webbplats med rött och blått

605
00:38:26,130 --> 00:38:30,370
överallt, och det är inte bra heller.

606
00:38:30,370 --> 00:38:34,210
Lägg märke till att Ben och jag arbetar som ett team är mycket trevligt eftersom jag är typ av mer

607
00:38:34,210 --> 00:38:38,030
i fronten, vi båda samverkar i mitten-slutet, och Ben är riktigt bra med back-end grejer,

608
00:38:38,030 --> 00:38:43,550
så det fungerar riktigt bra att vi kan utforma en webbplats och i princip hålen

609
00:38:43,550 --> 00:38:47,580
på den platsen som behöver fyllas kan fyllas av någon av oss, eller möjligen båda.

610
00:38:47,580 --> 00:38:50,210
Du vill vara säker på att det inte finns några hål i ditt team.

611
00:38:50,210 --> 00:38:51,180
Det är okej om det är lite av överlappning.

612
00:38:51,180 --> 00:38:53,670
Med andra ord, om du har två personer som är både bra med bakdelen,

613
00:38:53,670 --> 00:38:57,250
det kan vara bra också, eftersom de kan hjälpa varandra med problem

614
00:38:57,250 --> 00:38:58,820
att de har.

615
00:38:58,820 --> 00:39:02,590
Det kan vara ett problem om du bara har 1 person som är ansvarig för en viss sak

616
00:39:02,590 --> 00:39:06,650
och de stöter på ett problem, så du vill ha en liten bit av överlappning

617
00:39:06,650 --> 00:39:10,760
men du framför allt vill vara säker på att alla möjliga hål är fyllda.

618
00:39:10,760 --> 00:39:17,550
>> Det sista - och det borde vara självklart, men det är ofta inte.

619
00:39:17,550 --> 00:39:19,550
Du vill verkligen ha kul.

620
00:39:19,550 --> 00:39:23,360
Poängen med denna sista projekt i CS50 och ofta den punkt av webbutveckling i allmänhet

621
00:39:23,360 --> 00:39:26,360
är inte att bara göra ett jobb, eftersom den behöver göra.

622
00:39:26,360 --> 00:39:29,140
Du vill verkligen att ha roligt, och du vill att göra något

623
00:39:29,140 --> 00:39:31,180
som är motiverande dig att arbeta på det.

624
00:39:31,180 --> 00:39:33,650
Om vad du än gör är jobbigt att sitta ner och arbeta på,

625
00:39:33,650 --> 00:39:35,650
då du inte ska välja rätt projekt.

626
00:39:35,650 --> 00:39:37,730
Du vill välja något som du tycker är intressant,

627
00:39:37,730 --> 00:39:41,150
du verkligen vill se resultatet, du är upphetsad när du får en ny idé om

628
00:39:41,150 --> 00:39:44,700
något man kunde göra - så det finns alla typer av projekt där som jag är säker på

629
00:39:44,700 --> 00:39:47,290
du kan hitta - alla har något som verkligen skulle intriger dem

630
00:39:47,290 --> 00:39:49,290
om de gör ett webbaserat projekt.

631
00:39:49,290 --> 00:39:52,210
Jag säger det igen just nu.

632
00:39:52,210 --> 00:39:54,520
Om projektet verkar vara en smärta och du inte vill arbeta på det,

633
00:39:54,520 --> 00:39:57,260
Välj ett annat projekt. Välj något som verkligen inspirerar dig.

634
00:39:57,260 --> 00:40:00,260
>> Ben nämnde detta begreppet iteration en bit, och jag vill gå över den lite.

635
00:40:00,260 --> 00:40:08,250
Det är verkligen viktigt att arbeta i spurter där du få något funktionellt.

636
00:40:08,250 --> 00:40:13,420
Det kan vara bra om du har denna plan för en webbplats som kommer att göra A, B och C,

637
00:40:13,420 --> 00:40:16,000
och till slut kommer dit.

638
00:40:16,000 --> 00:40:18,600
Men du är fast i denna fas där man jobbar på det och jobbar på det,

639
00:40:18,600 --> 00:40:23,330
men ingenting har blir gjort. Du behöver inte ha något att se och en konkret, funktionell sak.

640
00:40:23,330 --> 00:40:27,940
Vad du verkligen vill göra så mycket som det verkar lite av en smärta ibland

641
00:40:27,940 --> 00:40:32,300
arbeta med något och sedan sorts mössa bort det så att det är åtminstone på en stabil, kör

642
00:40:32,300 --> 00:40:34,910
version, även om den inte har alla funktioner du vill ha.

643
00:40:34,910 --> 00:40:37,690
Och kanske finns det vissa funktioner som du verkligen vill lägga till, men du kan bara inte

644
00:40:37,690 --> 00:40:41,830
eftersom du vill få hemsidan till en funktionell utgångspunkt.

645
00:40:41,830 --> 00:40:44,400
Och så du vill slags ha hela utvecklingsprocessen ser ut som det.

646
00:40:44,400 --> 00:40:47,810
Du vill börja någonstans funktionell - eller väsentligen börja med ingenting -

647
00:40:47,810 --> 00:40:49,890
men du vill komma någonstans mycket grundläggande och funktionella.

648
00:40:49,890 --> 00:40:54,940
Och sedan igen, gör en sorts hopp och få någonstans funktionell igen.

649
00:40:54,940 --> 00:40:59,190
Du kommer att långsamt bygga upp, och det kan gå lite långsammare än annars,

650
00:40:59,190 --> 00:41:03,000
men i det långa loppet, om du ständigt fastnat i denna medelväg fas där du

651
00:41:03,000 --> 00:41:06,380
egentligen inte har något arbete, kan det vara en riktigt stor frustration

652
00:41:06,380 --> 00:41:09,970
att arbeta på ditt projekt eftersom du är alltid så nära att få det att fungera,

653
00:41:09,970 --> 00:41:12,130
och det har aldrig faktiskt arbetar.

654
00:41:12,130 --> 00:41:14,810
Du vill arbeta i dessa funktionella spurter,

655
00:41:14,810 --> 00:41:17,950
och du också vill göra en del eftertanke efter varje.

656
00:41:17,950 --> 00:41:21,260
Med andra ord, när du är vid en punkt där platsen arbetar nu -

657
00:41:21,260 --> 00:41:24,790
det har inte allt du vill, men det gör vissa saker -

658
00:41:24,790 --> 00:41:28,870
du vill tänka, okej, är denna sida uppnå målet som jag föresatt sig att göra?

659
00:41:28,870 --> 00:41:33,410
Med andra ord, om platsen kommer att göra X, är vad jag har att arbeta i riktning mot X?

660
00:41:33,410 --> 00:41:36,450
Är alla de funktioner som jag ville ha det?

661
00:41:36,450 --> 00:41:39,340
Och dessutom är det tjänar det övergripande syftet som jag vill?

662
00:41:39,340 --> 00:41:43,200
Om du upptäcker att din webbplats börjar svänga i en annan riktning

663
00:41:43,200 --> 00:41:47,330
eller kanske saker bara typ av inte tränar, kan det vara dags att växla lite.

664
00:41:47,330 --> 00:41:51,700
Med andra ord, det är värt att överväga - det är värt att kasta fram idéer om det behövs

665
00:41:51,700 --> 00:41:57,950
och med tanke arbetar jag egentligen mot vad jag vill bli.

666
00:41:57,950 --> 00:42:00,760
>> Jag tror att det är min nästa punkt. Var inte rädd för att överge idéer.

667
00:42:00,760 --> 00:42:03,750
Bara för att du tillbringade många timmar arbetar på en funktion

668
00:42:03,750 --> 00:42:07,890
och slutligen fick det fungerar men det verkligen inte går så bra -

669
00:42:07,890 --> 00:42:12,690
som om det inte är så bra eller användare har problem med att använda det - den sortens saker -

670
00:42:12,690 --> 00:42:15,300
var inte rädd för att kasta bort det.

671
00:42:15,300 --> 00:42:17,650
Det suger att du har spenderat mycket tid att arbeta på det,

672
00:42:17,650 --> 00:42:21,870
men i slutändan du inte vill ha en webbplats som är typ av som satts samman av dessa bitar som

673
00:42:21,870 --> 00:42:25,380
typ av arbete, men är inte så väl.

674
00:42:25,380 --> 00:42:27,990
Dessutom, var inte rädd för att anamma nya idéer.

675
00:42:27,990 --> 00:42:30,050
Om någon kommer och säger, hej, den platsen ser riktigt cool men

676
00:42:30,050 --> 00:42:32,290
skulle det inte ens vara bra om det också gjorde detta?

677
00:42:32,290 --> 00:42:36,220
Bara för att det är något som du inte hade för avsikt och något som inte är i din

678
00:42:36,220 --> 00:42:37,900
specifikationer, något som du inte har föresatt sig att göra,

679
00:42:37,900 --> 00:42:40,860
var inte rädd för att ta på den och sedan arbeta med det.

680
00:42:40,860 --> 00:42:43,680
Eftersom ofta de idéer som du kör med under hela utvecklingen

681
00:42:43,680 --> 00:42:47,630
hamna de riktigt häftiga funktioner på webbplatsen.

682
00:42:47,630 --> 00:42:49,630
>> Jag har sagt det förut. Jag säger det igen.

683
00:42:49,630 --> 00:42:51,630
Testare är super, super bra.

684
00:42:51,630 --> 00:42:56,350
Försök att få folk som aldrig har sett platsen innan för att logga in och se vad som händer

685
00:42:56,350 --> 00:42:59,080
eftersom de kan inte bara testa användbarheten av webbplatsen och användarupplevelse,

686
00:42:59,080 --> 00:43:02,070
men de kan också testa funktionen på ett sätt som du inte kan.

687
00:43:02,070 --> 00:43:06,430
Om du gör någon funktion som gör en viss sak

688
00:43:06,430 --> 00:43:11,620
och du vet att det kommer att göra samma sak på rätt sätt varje gång, det är bra.

689
00:43:11,620 --> 00:43:16,610
Men det kan ofta vara svårt att ta hänsyn till hörn fall där en användare kan

690
00:43:16,610 --> 00:43:19,500
skriver något som du inte väntade - just därför att du definierat

691
00:43:19,500 --> 00:43:21,500
funktionerna själv.

692
00:43:21,500 --> 00:43:23,730
Så, för att ha någon komma på som inte har någon aning om hur man använder webbplatsen

693
00:43:23,730 --> 00:43:26,840
och att bara bryta det på något sätt de kan göra är verkligen användbart eftersom du

694
00:43:26,840 --> 00:43:30,340
få en idé från ett helt annat perspektiv på vad på din webbplats fungerar

695
00:43:30,340 --> 00:43:33,300
och vad som behöver repareras.

696
00:43:33,300 --> 00:43:37,070
>> Slutligen kommer jag att tala om några generella god praxis,

697
00:43:37,070 --> 00:43:42,470
och du har sett en hel del av dessa i CS50, men också verkligen, verkligen gäller i en miljö projekt.

698
00:43:42,470 --> 00:43:47,600
En är kommentarer. Comment alltid din kod speciellt om du arbetar på ett stort team.

699
00:43:47,600 --> 00:43:51,230
Det kan vara så irriterande att bara ha en jätte block av kod som någon har skrivit

700
00:43:51,230 --> 00:43:54,230
och kanske det fungerar, kanske inte, men du har ingen aning om vad den gör,

701
00:43:54,230 --> 00:43:58,010
så du har ingen aning om det är bra eller inte, eller om det ska vara där eller inte,

702
00:43:58,010 --> 00:44:00,200
och om du arbetar på något annat är det ens möjligt att du arbetar med

703
00:44:00,200 --> 00:44:06,590
samma sak, så det är bara att vara väldigt, väldigt noga med att vara omtänksam mot dina kamrater

704
00:44:06,590 --> 00:44:09,710
och skriva kod som är väl dokumenterade.

705
00:44:09,710 --> 00:44:13,580
Du behöver inte gå så långt som att göra det hela där gillar om du ökar

706
00:44:13,580 --> 00:44:16,620
en räknare har en kommentar som säger, jag lägger till 1 till den här disken.

707
00:44:16,620 --> 00:44:20,450
Det behöver inte vara så detaljerat, men för någon funktion som du någonsin skriver

708
00:44:20,450 --> 00:44:23,160
Du bör ha någon dokumentation om vad som fungerar exakt gör,

709
00:44:23,160 --> 00:44:25,140
vad dess ingångar är, och vad den ska visa.

710
00:44:25,140 --> 00:44:27,800
Så att du kan använda andras delar av webbplatsen

711
00:44:27,800 --> 00:44:31,990
och du kan arbeta för att skapa något stort.

712
00:44:31,990 --> 00:44:34,100
>> En annan viktig sak är att du vill göra regelbundna rengöringar.

713
00:44:34,100 --> 00:44:40,490
Code blir rörigt. Känn dig inte illa om din kod är bara helt oläsbart och en gigantisk röra.

714
00:44:40,490 --> 00:44:42,770
Det händer i webbutveckling alltid.

715
00:44:42,770 --> 00:44:46,530
Du lägger till nya funktioner, ta bort gamla. Saker kommer att vara där som inte borde vara.

716
00:44:46,530 --> 00:44:49,330
Det är bra, men du vill vara säker på att ta itu med det regelbundet.

717
00:44:49,330 --> 00:44:53,430
Du vill inte låta det bygga upp till den punkt där du inte kan hitta något

718
00:44:53,430 --> 00:44:56,430
i koden, och du har ingen aning om vad som helst gör.

719
00:44:56,430 --> 00:44:58,430
Det är fallet med HTML.

720
00:44:58,430 --> 00:44:59,490
Ibland kommer du att sluta med föremål som inte innehåller någonting,

721
00:44:59,490 --> 00:45:01,320
och du vill bli av med dem.

722
00:45:01,320 --> 00:45:04,610
I CSS, kan du hänvisa till element som inte finns längre,

723
00:45:04,610 --> 00:45:06,340
så du vill bli av med denna kod.

724
00:45:06,340 --> 00:45:09,900
I JavaScript, kanske du har tagit bort något från HTML.

725
00:45:09,900 --> 00:45:13,150
Så, vill du vara säker på att du alltid städa upp, göra saker ganska

726
00:45:13,150 --> 00:45:17,450
så mycket du kan på en regelbunden basis.

727
00:45:17,450 --> 00:45:21,060
>> En annan riktigt bra sak som jag inte tror är skisseras mycket i CS50

728
00:45:21,060 --> 00:45:23,430
men det är värt att komma in är versionshantering.

729
00:45:23,430 --> 00:45:27,180
Idén om versionshantering är när du i princip hålla reda på alla framsteg

730
00:45:27,180 --> 00:45:30,820
du har gjort till din webbplats och om det vid något tillfälle du inser, åh, detta arbetade

731
00:45:30,820 --> 00:45:35,220
ett tag sedan men det inte fungerar längre, kan du gå tillbaka till tidigare versioner

732
00:45:35,220 --> 00:45:37,720
och se vad som har förändrats sedan dess och sånt.

733
00:45:37,720 --> 00:45:41,670
Det primära sättet att göra det är med Git, och Git är hela denna typ av system som

734
00:45:41,670 --> 00:45:46,390
Jag tror Tommy MacWilliam gav ett seminarium om förra året.

735
00:45:46,390 --> 00:45:51,520
Om du går in i CS50 seminarier för 2011, kan du se hans seminarium på det.

736
00:45:51,520 --> 00:45:57,070
Idén med Git är i grunden att regelbundet du gör dessa åtaganden

737
00:45:57,070 --> 00:46:01,430
vilka är sätt att säga platsen är i en ganska stabil version just nu så

738
00:46:01,430 --> 00:46:05,910
Jag förpackning upp den och skickar den iväg till en server, och sedan kan du gå till den servern

739
00:46:05,910 --> 00:46:07,910
och titta på alla tidigare versioner av din kod och se hur det har gått

740
00:46:07,910 --> 00:46:12,210
och alla den sortens bra grejer.

741
00:46:12,210 --> 00:46:14,210
Så, det är i princip det.

742
00:46:14,210 --> 00:46:17,870
När det gäller webbutveckling, vi är glada att stanna kvar och svara på alla

743
00:46:17,870 --> 00:46:20,570
frågor så långt som vår presentation.

744
00:46:20,570 --> 00:46:22,900
Det var allt. Tack. >> [Ben] Tack.

745
00:46:22,900 --> 00:46:28,480
[Applåder]

746
00:46:28,480 --> 00:46:30,950
>> [Billy] Personal, är det någon som har några frågor om saker som vi har täckt

747
00:46:30,950 --> 00:46:33,950
eller saker som vi inte har täckt att de hoppades att vi skulle täcka?

748
00:46:33,950 --> 00:46:35,950
Vi skulle gärna svara på dem. Någon?

749
00:46:35,950 --> 00:46:50,360
[Publiken] Vilka är för-och nackdelar med att använda Ruby eller använda Python?

750
00:46:50,360 --> 00:46:58,660
[Ben] Frågan var, vad är för-och nackdelar med att använda Ruby eller Python

751
00:46:58,660 --> 00:46:59,900
istället för som PHP.

752
00:46:59,900 --> 00:47:11,340
Proffsen är att Ruby och Python är mycket bättre språk än PHP.

753
00:47:11,340 --> 00:47:14,920
Åtminstone i min mening, och jag tror på en massa andra människors åsikter också.

754
00:47:14,920 --> 00:47:20,990
De var utformade mer för att göra komplicerade saker,

755
00:47:20,990 --> 00:47:25,380
och mindre för handtralla tillsammans webbsidor riktigt snabbt med

756
00:47:25,380 --> 00:47:28,400
lite av dynamiskt innehåll.

757
00:47:28,400 --> 00:47:35,180
Nackdelarna är att det finns en liten bit av - det är mer av en inlärningskurva

758
00:47:35,180 --> 00:47:37,220
att få dem att bygga upp.

759
00:47:37,220 --> 00:47:41,010
Det är, liksom i PHP, kan du bara ha en HTML-fil och du skriver mindre än,

760
00:47:41,010 --> 00:47:43,060
frågetecken, och sedan skriva lite kod, och sedan skriver du frågetecken,

761
00:47:43,060 --> 00:47:45,700
större-än, och sedan är du klar.

762
00:47:45,700 --> 00:47:50,300
På andra språk som Ruby eller Python,

763
00:47:50,300 --> 00:47:56,810
du måste gå igenom lite mer arbete för att få den första platsen igång.

764
00:47:56,810 --> 00:48:02,730
Det finns också - åtminstone det brukade vara fallet - att det finns mer dokumentation

765
00:48:02,730 --> 00:48:05,480
tillgängliga för PHP bara för att det finns fler människor som använder det.

766
00:48:05,480 --> 00:48:09,370
Jag tror att det är inte så mycket en fråga längre.

767
00:48:09,370 --> 00:48:12,520
Det finns verkligen mycket bra dokumentation för saker som Ruby on Rails

768
00:48:12,520 --> 00:48:16,080
eller Django för Python är motsvarande.

769
00:48:16,080 --> 00:48:25,910
PHP är den som alla har använt i flera år, och du vet hur det fungerar.

770
00:48:25,910 --> 00:48:28,460
Ruby och Python är lite mindre mogen.

771
00:48:28,460 --> 00:48:33,130
>> [Publiken] Om du skulle välja mellan någon av dem att lära sig eller plocka upp,

772
00:48:33,130 --> 00:48:36,130
vilket skulle du föredra?

773
00:48:36,130 --> 00:48:38,870
Ärligt talat, jag tror att det beror på personen.

774
00:48:38,870 --> 00:48:45,450
Jag är ledsen. Frågan var vilket skulle du välja för någon att lära sig?

775
00:48:45,450 --> 00:48:50,230
Jag tycker Python den trevligaste personligen.

776
00:48:50,230 --> 00:48:55,360
Det finns en massa människor som - Jag gjorde min första web dev projekt i Python och Django.

777
00:48:55,360 --> 00:49:00,300
Det finns en massa människor som gillar Ruby on Rails också.

778
00:49:00,300 --> 00:49:02,650
Förmodligen fler människor som känner Ruby on Rails.

779
00:49:02,650 --> 00:49:05,270
Ärligt talat, jag skulle bara gå med vad människor runt omkring dig vet

780
00:49:05,270 --> 00:49:09,680
så att du har folk att ställa frågor.

781
00:49:19,640 --> 00:49:24,170
>> Frågan var - på delade servrar är det ganska svårt att arbeta med Python?

782
00:49:24,170 --> 00:49:26,170
Det beror på ditt webbhotell.

783
00:49:26,170 --> 00:49:29,400
Det finns ett antal webbhotell som kommer att lägga upp Python grejer.

784
00:49:29,400 --> 00:49:31,400
Webfaction gör det, eller hur?

785
00:49:31,400 --> 00:49:34,400
Webfaction är en som Billy och jag har använt för vissa projekt.

786
00:49:34,400 --> 00:49:37,750
De är riktigt bra. De stöder de flesta språk.

787
00:49:37,750 --> 00:49:40,020
Men det är sant att PHP är mycket brett stöd.

788
00:49:40,020 --> 00:49:45,210
Så, om du har fastnat på ett webbhotell som bara gör PHP, det är en bra anledning att använda PHP.

789
00:49:45,210 --> 00:49:56,010
>> [Publiken] Jag kom precis på att lära sig att fråga några databaser,

790
00:49:56,010 --> 00:50:00,680
och jag vet att min SQL är överallt, men jag nyligen blev utsatt för -

791
00:50:00,680 --> 00:50:04,470
och du påpekade det. Du ser JSON och expanderbara databaser.

792
00:50:04,470 --> 00:50:14,580
My SQL är fortfarande överallt. Hur ser du på det som händer?

793
00:50:14,580 --> 00:50:21,330
Kommer det att bli en allt större tendens till mer utbyggbart (ohörbart)?

794
00:50:21,330 --> 00:50:30,100
Frågan var - tror jag att det kommer att bli en trend mot icke-SQL-databaser.

795
00:50:30,100 --> 00:50:33,850
Till exempel, som MongoDB. Jag tror det är definitivt sant.

796
00:50:33,850 --> 00:50:38,730
Mitt råd var mestadels mySQL relaterade här bara för att MySQL är

797
00:50:38,730 --> 00:50:40,950
branschstandard.

798
00:50:40,950 --> 00:50:45,950
Personligen föredrar jag mycket databaser som inte har schemos som MongoDB

799
00:50:45,950 --> 00:50:49,520
där du inte har frågan om, åh, jag behöver lägga till en kolumn.

800
00:50:49,520 --> 00:50:51,600
Ve mig, liksom vad gör jag?

801
00:50:51,600 --> 00:50:55,840
Det är väldigt svårt att göra det på MySQL, men när du har något som Mongo

802
00:50:55,840 --> 00:50:57,840
det är mycket trevligare.

803
00:50:57,840 --> 00:51:03,780
Den andra fina Mongo är att dina poster är faktiskt JavaScript-objekt.

804
00:51:03,780 --> 00:51:10,110
Det finns ingen typ av omvandlingssteg där du måste ta dessa databasrader

805
00:51:10,110 --> 00:51:13,140
och förvandla dem till ett JavaScript-objekt och sedan skicka dem över tråden.

806
00:51:13,140 --> 00:51:20,290
Jag tror att sånt kommer att bli mycket, mycket användbart för snabb webbutveckling i framtiden.

807
00:51:20,290 --> 00:51:23,060
>> [Billy] Något jag skulle lägga till som är bara en allmän punkt är att

808
00:51:23,060 --> 00:51:26,580
inte känna att du borde ha lärt sig alla de språk som vi har diskuterat

809
00:51:26,580 --> 00:51:28,580
från vårt seminarium.

810
00:51:28,580 --> 00:51:30,560
Uppenbar poängen är att ge dig en uppfattning om vad som finns där ute,

811
00:51:30,560 --> 00:51:33,450
och om du är nyfiken på någon av de saker vi har nämnt kan du Googla dem

812
00:51:33,450 --> 00:51:35,830
och läsa på dem.

813
00:51:35,830 --> 00:51:38,750
Och som jag nämnde, finns det några seminarier som behandlar just dessa saker.

814
00:51:38,750 --> 00:51:41,660
Det finns ännu fler seminarier som jag inte har nämnt det förmodligen komma in

815
00:51:41,660 --> 00:51:43,660
det här också.

816
00:51:43,660 --> 00:51:46,610
Tanken är att om du vill arbeta på något, här är de verktyg till ditt förfogande.

817
00:51:46,610 --> 00:51:51,630
Känn dig inte överväldigad om du inte är riktigt säker på vad dessa verktyg gör exakt,

818
00:51:51,630 --> 00:51:54,830
men vet att de är ute och att du kan göra omfattande användning av dem

819
00:51:54,830 --> 00:51:56,830
av Google.

820
00:51:56,830 --> 00:51:59,960
>> [Publiken] Vilken typ av saker du behöver göra för att se till att din webbplats

821
00:51:59,960 --> 00:52:02,530
ser bra på mobila enheter?

822
00:52:02,530 --> 00:52:05,590
[Billy] Mobila enheter är lite svårt.

823
00:52:05,590 --> 00:52:07,590
Det finns två sätt att närma sig den.

824
00:52:07,590 --> 00:52:11,500
Det första sättet är att du faktiskt har en mobil webbplats.

825
00:52:11,500 --> 00:52:14,660
Med andra ord, gör du något slags upptäckt i början

826
00:52:14,660 --> 00:52:18,830
när webbläsaren gör förfrågan till din webbplats som antingen säger

827
00:52:18,830 --> 00:52:25,240
returnera denna uppfattning - som kommer att vara den vy för stationära eller bärbara webbläsare -

828
00:52:25,240 --> 00:52:27,710
och det andra vy för mobila enheter.

829
00:52:27,710 --> 00:52:33,090
Det är en plats där åsikter är verkligen trevligt att du kan ganska mycket swap den

830
00:52:33,090 --> 00:52:37,580
två ut och har ett gränssnitt som fungerar riktigt fint på mobila enheter

831
00:52:37,580 --> 00:52:40,770
och har en helt annan en som fungerar fint på läsar enheter.

832
00:52:40,770 --> 00:52:43,770
Problemet med det är att det tar lång tid eftersom det innebär kodning

833
00:52:43,770 --> 00:52:47,060
ett helt annat gränssnitt.

834
00:52:47,060 --> 00:52:49,720
Det andra sättet som du kan göra det är -

835
00:52:49,720 --> 00:52:55,250
en hel del moderna telefoner kommer att visa webbsidor och försöka göra dem som en webbläsare skulle,

836
00:52:55,250 --> 00:52:57,680
och de gör sitt bästa.

837
00:52:57,680 --> 00:53:04,340
Du kan slags försök att stanna ljus på mängden jQuery JavaScript du använder

838
00:53:04,340 --> 00:53:07,360
som tenderar att vara där saker kan gå fel lite.

839
00:53:07,360 --> 00:53:13,430
Detta är en slags det sätt som du bör använda om du inte har så mycket tid.

840
00:53:13,430 --> 00:53:18,540
Om du har tid att arbeta på ett mobilt gränssnitt, det är uppenbarligen det bästa alternativet.

841
00:53:18,540 --> 00:53:23,320
>> Jag tycker generellt för CS50 projekt, du kommer att vilja välja det ena eller det andra.

842
00:53:23,320 --> 00:53:27,990
Med andra ord, vill du göra en mobil app eller om du vill göra en stationär webbplats.

843
00:53:27,990 --> 00:53:32,200
Och den sortens avgör var du än går med det.

844
00:53:32,200 --> 00:53:35,360
Men om du vill bygga ut den senare, förmodligen din bästa insats är

845
00:53:35,360 --> 00:53:37,360
för att göra ett annat gränssnitt för den andra.

846
00:53:51,650 --> 00:53:56,340
Jag har lite erfarenhet av att utveckla Wordpress-baserade webbplatser.

847
00:53:56,340 --> 00:53:58,670
Jag var värd en personlig hemsida på Wordpress för en stund.

848
00:53:58,670 --> 00:54:02,310
Dessa typer av ramar kan vara trevligt lika mycket grundläggande saker.

849
00:54:02,310 --> 00:54:07,050
Ofta kommer du bara stöta på en hel del customizability frågor ändå.

850
00:54:07,050 --> 00:54:10,940
Du vill ha något som ser ut på ett visst sätt eller vara på ett visst sätt

851
00:54:10,940 --> 00:54:14,510
och du kan bara inte för att det är fastprogrammerade i systemet som

852
00:54:14,510 --> 00:54:17,480
detta är hur du måste göra saker som kan vara lite av ett problem.

853
00:54:17,480 --> 00:54:22,020
Sedan dess har jag typ av varit mer benägna att arbeta med webbplatser från grunden.

854
00:54:22,020 --> 00:54:26,840
För saker som blogg databaser och sånt det är verkligen inte så svårt att bygga en ram.

855
00:54:26,840 --> 00:54:29,970
Om du verkligen sträckt för tiden, kan du naturligtvis använda något som Wordpress

856
00:54:29,970 --> 00:54:33,120
eller sånt för en blogg.

857
00:54:33,120 --> 00:54:38,790
Den typ av saker som bloggar butik och gör är egentligen inte svårt nog att

858
00:54:38,790 --> 00:54:41,500
om du kör in i någon av dessa typer av saker, är du förmodligen bäst att bara

859
00:54:41,500 --> 00:54:43,500
göra en egen version.

860
00:54:43,500 --> 00:54:48,350
>> Jag tror att det är om det, så tack igen för att du kom.

861
00:54:48,350 --> 00:54:51,960
Vi gillade verkligen prata med er och hoppas att ni lärt lite grejer.

862
00:54:51,960 --> 00:54:55,350
[Ben] Vi är glada för att prata - vi måste gå men vi är glada för att prata mer utanför

863
00:54:55,350 --> 00:55:01,650
om du har en annan fråga. Tack igen. [Applåder]

864
00:55:03,750 --> 00:55:06,000
[CS50.TV]