1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminarium] [Förbereda din webbplats för webben]

2
00:00:02,000 --> 00:00:05,000
[Yuechen Zhao] [Harvard University]

3
00:00:05,000 --> 00:00:07,000
[Detta är CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:11,660
>> Okej. Här är en annan timme av webbutveckling om ni är upp för det.

5
00:00:11,660 --> 00:00:16,290
Idag ska jag tala om att förbereda din webbplats för webben.

6
00:00:16,290 --> 00:00:20,260
Hela dagen - och förmodligen för de senaste 2 veckorna -

7
00:00:20,260 --> 00:00:22,240
Vi har pratat om hur man skapar en webbplats,

8
00:00:22,240 --> 00:00:24,880
hur man använder HTML, hur man använder PHP, hur man använder ramar,

9
00:00:24,880 --> 00:00:29,420
hur du kontrollerar att du kan interagera med databasen - sånt.

10
00:00:29,420 --> 00:00:34,830
Men idag, vi kommer att tala om var din webbplats kommer att leva efter CS50.

11
00:00:34,830 --> 00:00:40,010
För trots allt, det händer CS50 inte tidigare December.

12
00:00:40,010 --> 00:00:42,090
Vi kommer att tala om domännamn, hosting.

13
00:00:42,090 --> 00:00:44,790
Vi kommer att tala om vad kompatibilitet med olika webbläsare

14
00:00:44,790 --> 00:00:49,540
och plattformsoberoende kompatibilitet är, och hur man kan se till att din webbplats

15
00:00:49,540 --> 00:00:51,610
kommer att fungera under alla förhållanden.

16
00:00:51,610 --> 00:00:54,330
Vi pratar om felhantering och andra server magi.

17
00:00:54,330 --> 00:00:57,890
Vi pratar om prestandaoptimering, sökmotoroptimering,

18
00:00:57,890 --> 00:01:00,310
och hur man får folk att faktiskt besöka dina webbplatser.

19
00:01:00,310 --> 00:01:05,960
Och slutligen, för att bara några bra resurser att se till att ni har tillräckligt av dem

20
00:01:05,960 --> 00:01:09,680
att gå ut med din slutliga projektet, och förhoppningsvis efter.

21
00:01:09,680 --> 00:01:13,120
>> Det första som vi kommer att prata om är domännamn.

22
00:01:13,120 --> 00:01:18,020
Just nu är du programmerar in din apparat, kommer du till en lokal värd

23
00:01:18,020 --> 00:01:20,360
som egentligen inte ett domännamn.

24
00:01:20,360 --> 00:01:26,370
Det blir liksom bara ett smeknamn eller ett alias för din faktiska Linux-installation

25
00:01:26,370 --> 00:01:31,150
insidan av antingen VMware på en Mac eller VMware Player på en dator.

26
00:01:31,150 --> 00:01:36,510
Domännamn kan du få en plats på webben och sedan gå till något som

27
00:01:36,510 --> 00:01:39,400
www.google.com och få hemsidan.

28
00:01:39,400 --> 00:01:41,500
Hur fungerar de?

29
00:01:41,500 --> 00:01:43,390
Låt oss säga att du är bara en vanlig webbserver -

30
00:01:43,390 --> 00:01:50,080
genomsnittlig Internetanvändare och du har en bärbar dator, och du går till www.howstuffworks.com.

31
00:01:50,080 --> 00:01:52,570
Du kan förmodligen se var jag stal denna från.

32
00:01:52,570 --> 00:01:57,300
Hur funkar - datorn kommer sedan be en lokal DNS-server,

33
00:01:57,300 --> 00:01:59,300
"Vet du var här webbplatsen är?"

34
00:01:59,300 --> 00:02:02,200
"Vet du IP-adressen för www.howstuffworks.com?"

35
00:02:02,200 --> 00:02:05,580
Din DNS-server kan säga, "Ja, det gör jag."

36
00:02:05,580 --> 00:02:09,139
I så fall får du en IP-adress, och datorn åtkomst som IP-adress.

37
00:02:09,139 --> 00:02:15,050
Om den inte gör det, frågar den en annan DNS-server, "Hey! Vet du vad www.howstuffworks.com är?"

38
00:02:15,050 --> 00:02:17,670
Denna server kan säga, "Ja, det gör jag."

39
00:02:17,670 --> 00:02:22,500
Så berättar den andra vad det är, och slutligen, blir att information skickas till din dator,

40
00:02:22,500 --> 00:02:24,680
och du kan komma åt howstuffworks.com.

41
00:02:24,680 --> 00:02:27,540
>> Hur kan du få en av dessa magiska saker?

42
00:02:27,540 --> 00:02:32,940
Hur kan du få kanske www.yourname.com eller www.ilovecats.com?

43
00:02:32,940 --> 00:02:35,350
Du kan anmäla dig till en,

44
00:02:35,350 --> 00:02:38,280
och det finns en hel del webbplatser där ute som tillåter dig att göra det.

45
00:02:38,280 --> 00:02:41,420
Du måste - i de flesta fall måste du betala för dem.

46
00:02:41,420 --> 00:02:43,890
Det finns vissa domännamn som är gratis.

47
00:02:43,890 --> 00:02:50,900
Om du går till www.co.cc eller. Tkdomainnames, de är gratis.

48
00:02:50,900 --> 00:02:56,500
Men, de kommer med vissa begränsningar, och i själva verket en del av dem kanske inte ens

49
00:02:56,500 --> 00:03:00,540
verkliga, top-level domännamn som. com eller. net.

50
00:03:00,540 --> 00:03:03,300
Normalt skulle jag föreslå att gå till en av dem

51
00:03:03,300 --> 00:03:07,060
eftersom användarna är bara mer bekväm med dem.

52
00:03:07,060 --> 00:03:10,070
Du har sett en hel del. Coms. Du har sett en hel del. Nät.

53
00:03:10,070 --> 00:03:13,790
Du har förmodligen inte har sett en hel del. Co.cc 's, så de är svårare att komma ihåg.

54
00:03:13,790 --> 00:03:18,900
Olika webbplatser som GoDaddy eller NameCheap eller - Jag använde en som är

55
00:03:18,900 --> 00:03:21,550
slags skissartade - kallad activedomain.com.

56
00:03:21,550 --> 00:03:24,160
Det ser verkligen luddigt, men det har fungerat riktigt bra för mig.

57
00:03:24,160 --> 00:03:27,810
>> Och slutligen, har ni andra som kanske gör mer reklam som Network Solutions.

58
00:03:27,810 --> 00:03:31,140
Men om du går in på NetworkSolutions.com och titta på deras prissättning

59
00:03:31,140 --> 00:03:34,070
det är verkligen dyrt. Jag tittade på dem i går kväll.

60
00:03:34,070 --> 00:03:37,400
För ett år för ett domännamn, är det förmodligen inte värt så mycket pengar.

61
00:03:37,400 --> 00:03:40,210
I själva verket, om du får en. Com eller. Org eller. Net

62
00:03:40,210 --> 00:03:43,430
det vanliga priset är ca $ 10 per år.

63
00:03:43,430 --> 00:03:48,710
Så om du betalar mycket mer än så, det är nog inte så värt det

64
00:03:48,710 --> 00:03:52,440
eftersom, trots allt, gör dessa webbplatser inte något med det domännamnet.

65
00:03:52,440 --> 00:03:58,270
De ger bara det till dig, och så om du kan få den för billigt, varför inte?

66
00:03:58,270 --> 00:04:02,540
>> Den andra saken är när du har ditt domännamn, så har du förmodligen vill

67
00:04:02,540 --> 00:04:08,610
gå vidare till antingen Godaddy.com eller var du köpte ditt domännamn

68
00:04:08,610 --> 00:04:11,220
och ange namnservrarna för det domännamnet.

69
00:04:11,220 --> 00:04:15,560
Vad det betyder är när en användare går till www.howstuffworks.com,

70
00:04:15,560 --> 00:04:20,839
dessa namnserveradresserna IP-adresser är de IP-adresser som de skulle kunna titta upp.

71
00:04:20,839 --> 00:04:24,680
De skulle kunna komma åt din webbplats via dessa namnservrar.

72
00:04:24,680 --> 00:04:26,830
Om du ansöker om värd någonstans

73
00:04:26,830 --> 00:04:31,210
då din värd kommer sannolikt att ge dig de namnservrar som ska användas.

74
00:04:31,210 --> 00:04:34,210
>> Och slutligen, det är det här som kallas en WHOIS.

75
00:04:34,210 --> 00:04:38,890
En WHOIS-databas är en databas som du kan mata in ett domännamn

76
00:04:38,890 --> 00:04:44,170
och det kommer att spotta ut lite information om ägaren av denna webbplats och andra kontaktuppgifter.

77
00:04:44,170 --> 00:04:49,080
Nu kanske du säger, "Jag vill verkligen inte min hemadress eller jag vill verkligen inte min e-postadress

78
00:04:49,080 --> 00:04:54,010
på hemsidan för alla att se eller på Internet för alla att se. "

79
00:04:54,010 --> 00:04:57,740
Då kanske du vill använda något som en hel del webbhotell tjänster ger -

80
00:04:57,740 --> 00:04:59,740
som en WHOIS chef.

81
00:04:59,740 --> 00:05:03,550
En WHOIS chef är helt enkelt en annan tjänst som många av dem ger att

82
00:05:03,550 --> 00:05:07,700
hudar bort denna information och sätter bara på vem som är chef för namnet -

83
00:05:07,700 --> 00:05:13,070
för adressen är det oftast bara att företagets namn som har gett dig detta domännamn -

84
00:05:13,070 --> 00:05:17,350
och så då din personliga information inte ska läcka på Internet,

85
00:05:17,350 --> 00:05:19,350
vilket är oftast ganska bra.

86
00:05:19,350 --> 00:05:21,350
Själv använder jag en av dessa tjänster.

87
00:05:21,350 --> 00:05:25,630
Om du inte bryr dig om din egen integritet så det spelar ingen roll egentligen.

88
00:05:25,630 --> 00:05:32,490
>> En DNS-server står för Domain Name System, och vad det är -

89
00:05:32,490 --> 00:05:36,560
det är ungefär som en hash tabell någonstans som säger,

90
00:05:36,560 --> 00:05:42,320
 "Denna webbadress kommer att mappa till denna IP-adress." Och det är allt det är.

91
00:05:42,320 --> 00:05:48,180
Så när du frågar denna DNS-server, då kan du få IP-adresser

92
00:05:48,180 --> 00:05:51,930
för att motsvarande domännamn och sedan besöka denna webbplats.

93
00:05:51,930 --> 00:05:59,820
(Publiken ställa en fråga - ohörbart)

94
00:05:59,820 --> 00:06:07,910
Den första? Den första nivån är faktiskt oftast bara datorns cache själv.

95
00:06:07,910 --> 00:06:12,570
Datorn slags minns den senaste gången du gick till www.google.com

96
00:06:12,570 --> 00:06:18,090
Det var vid denna IP-adress, och sedan efter ett tag, kommer att cache ut,

97
00:06:18,090 --> 00:06:23,560
och det kommer att ställa ut på Comcast DNS,

98
00:06:23,560 --> 00:06:26,400
"Hej, vad är www.google.com?"

99
00:06:26,400 --> 00:06:31,040
Normalt när du köper ett domännamn och du registrerar en, och du skapar en webbplats,

100
00:06:31,040 --> 00:06:35,670
du kan inte gå till webbplatsen omedelbart med att domännamnet eftersom namnservrar

101
00:06:35,670 --> 00:06:40,180
över hela världen vet inte om ditt domännamn ännu. Det har att fylla.

102
00:06:40,180 --> 00:06:43,220
Det brukar ta ca 24-48 timmar.

103
00:06:43,220 --> 00:06:48,460
Okej. Så, det är lite om domännamn. De är väldigt cool.

104
00:06:48,460 --> 00:06:51,540
Jag tycker du ska få en om du menar allvar med projektet

105
00:06:51,540 --> 00:06:55,300
och om du verkligen vill göra projektet känt i hela campus,

106
00:06:55,300 --> 00:06:58,050
har ett domännamn gör att det ser riktigt professionellt.

107
00:06:58,050 --> 00:07:01,510
>> Sen nästa steg, naturligtvis, är att ha någon form av hosting.

108
00:07:01,510 --> 00:07:05,540
Om du bara lägga upp den på din dator, har ingen någonsin kommer att kunna gå till den.

109
00:07:05,540 --> 00:07:09,110
Du skulle kunna ställa upp en server på datorn och hålla datorn i evigheter,

110
00:07:09,110 --> 00:07:11,160
men det är inte rekommenderat.

111
00:07:11,160 --> 00:07:14,000
Det finns olika typer av hosting finns tillgängliga elektroniskt.

112
00:07:14,000 --> 00:07:21,870
Det är delad hosting. Det finns VPN (ohörbart) som är virtuella värdar.

113
00:07:21,870 --> 00:07:23,870
Det finns semi-dedikerade och engagerade.

114
00:07:23,870 --> 00:07:29,030
Av de 3 sista, VPN, semi-dedikerad och engagerad är oftast dyrare.

115
00:07:29,030 --> 00:07:32,660
De är vanligtvis används för webbplatser som kräver mer resurser.

116
00:07:32,660 --> 00:07:34,680
Om du just har börjat med en hemsida,

117
00:07:34,680 --> 00:07:40,670
det kan bara vara mer ekonomiskt att gå med delad hosting.

118
00:07:40,670 --> 00:07:43,430
Och vad delade medel är bara ett gäng webbplatser är alla tillsammans

119
00:07:43,430 --> 00:07:51,560
sortera om på en server på denna webbplats på detta värdservern, och du kan komma åt din webbplats

120
00:07:51,560 --> 00:07:53,660
via domännamn.

121
00:07:53,660 --> 00:07:55,980
>> Det finns en hel del populära värdar ute.

122
00:07:55,980 --> 00:08:01,160
HostGator och DreamHost - de är väldigt, väldigt stora och väldigt, väldigt populär

123
00:08:01,160 --> 00:08:03,160
och mycket, mycket framgångsrik.

124
00:08:03,160 --> 00:08:05,160
Jag personligen använder en sk MDDHosting.

125
00:08:05,160 --> 00:08:08,240
Om du går till www.mddhosting.com, det är min värd val.

126
00:08:08,240 --> 00:08:10,240
Jag tycker de är mycket bra.

127
00:08:10,240 --> 00:08:14,550
De har alltid varit mycket pålitlig, och jag har aldrig haft några problem med dem.

128
00:08:14,550 --> 00:08:18,610
De har också mycket konkurrenskraftiga priser.

129
00:08:18,610 --> 00:08:24,400
Två som jag inte gillar är GoDaddy - det är också en mycket populär värd,

130
00:08:24,400 --> 00:08:26,400
men jag har haft fruktansvärda erfarenheter med dem,

131
00:08:26,400 --> 00:08:29,430
och en massa människor som jag känner har haft riktigt hemska erfarenheter med dem.

132
00:08:29,430 --> 00:08:32,150
De slags gå efter människor som inte vet vad de ska göra -

133
00:08:32,150 --> 00:08:34,150
kanske du gör en webbplats för första gången,

134
00:08:34,150 --> 00:08:37,150
och så de slags con dem att köpa deras hosting paket.

135
00:08:37,150 --> 00:08:42,570
Gör inte det. Fall inte för det. Gå leta efter andra webbhotell paket som verkligen passar dina behov.

136
00:08:42,570 --> 00:08:44,880
Och den andra är - det finns gratis värdar ute.

137
00:08:44,880 --> 00:08:47,350
Det finns webbplatser som är värd din hemsida för gratis -

138
00:08:47,350 --> 00:08:49,350
ibland genom att sätta en annons på din webbplats,

139
00:08:49,350 --> 00:08:52,290
ibland genom att du deltar i deras forum,

140
00:08:52,290 --> 00:08:54,340
men ibland bara också gratis.

141
00:08:54,340 --> 00:09:00,000
Men, var försiktig med fri värdar eftersom många av dem egentligen bara gå i konkurs

142
00:09:00,000 --> 00:09:03,480
efter några månader. Du bara inte kan hålla jämna steg med kostnaderna.

143
00:09:03,480 --> 00:09:07,460
Andra är bara mycket otillförlitliga, och din webbplats kommer alltid att vara nere,

144
00:09:07,460 --> 00:09:09,700
och du vill inte att det ska hända.

145
00:09:09,700 --> 00:09:12,330
>> Varje värd kommer att erbjuda sin egen kontrollpanel.

146
00:09:12,330 --> 00:09:16,520
Observera att din apparat, det är verkligen inte en kontrollpanel per se.

147
00:09:16,520 --> 00:09:19,230
Du måste använda terminalen för att gå och redigera filerna.

148
00:09:19,230 --> 00:09:21,230
Du måste chmod saker själv.

149
00:09:21,230 --> 00:09:24,770
Om du ville gå till phpMyAdmin,

150
00:09:24,770 --> 00:09:29,560
du måste gå till localhost @ / phpmyadmin och sånt.

151
00:09:29,560 --> 00:09:36,660
Men med en kontrollpanel kan du gå in och redigera filerna på din server

152
00:09:36,660 --> 00:09:40,350
med Windows Utforskaren eller ett Finder-typen application.

153
00:09:40,350 --> 00:09:44,810
Eller du kan gå igenom och titta på dina databaser med egna verktyg

154
00:09:44,810 --> 00:09:47,280
istället för phpMyAdmin.

155
00:09:47,280 --> 00:09:52,240
Så, det finns en mängd val här, och några av de mer populära kontrollpaneler finns där uppe.

156
00:09:52,240 --> 00:09:54,240
Men om du letar efter en värd,

157
00:09:54,240 --> 00:09:57,090
då kanske du vill titta på vilka typer av anpassningar och tillval

158
00:09:57,090 --> 00:10:02,810
de erbjuder mig att anpassa min server och att göra min hemsida springa bättre.

159
00:10:02,810 --> 00:10:07,110
Så, då kanske du frågar, "Nå, hur gör jag väljer webbhotell?"

160
00:10:07,110 --> 00:10:11,460
Om du går in på någon värd webbplats finns det en hel del jargong, och det finns en hel del alternativ.

161
00:10:11,460 --> 00:10:14,470
Det finns en hel del olika priser också.

162
00:10:14,470 --> 00:10:19,690
Normalt jag gå för de billigare bara för webbplatser som kanske du och jag gör -

163
00:10:19,690 --> 00:10:23,520
och särskilt just nu, särskilt som förrätt - de kanske inte behöver så många resurser

164
00:10:23,520 --> 00:10:26,770
som kanske en webbplats som Microsoft.com.

165
00:10:26,770 --> 00:10:32,090
>> Först du vill titta på det operativsystemet om du är riktigt nyfiken på om

166
00:10:32,090 --> 00:10:35,090
din webbplats kommer att vara värd på Linux, Windows eller på Mac.

167
00:10:35,090 --> 00:10:39,790
Normalt går vi bara med Linux eftersom det är oftast det billigaste,

168
00:10:39,790 --> 00:10:43,730
och även en som kanske ni är mer bekant med på grund av apparaten.

169
00:10:43,730 --> 00:10:48,040
Och då, kanske de ska sätta några begränsningar på hur mycket bandbredd som du får -

170
00:10:48,040 --> 00:10:53,030
som hur många megabyte eller gigabyte data kan användare ladda ner

171
00:10:53,030 --> 00:10:55,470
från din webbplats per månad? Eller diskutrymme.

172
00:10:55,470 --> 00:11:00,640
Hur mycket utrymme får du? Är det 500 MB? Är det 2 GB? Är det obegränsat?

173
00:11:00,640 --> 00:11:05,920
Numera en hel del webbservrar ger dig obegränsad diskutrymme som ett sätt för dem

174
00:11:05,920 --> 00:11:08,560
att locka dig att få deras hosting paket.

175
00:11:08,560 --> 00:11:11,850
Men om du verkligen tänker på det, när kommer ni någonsin att behöva obegränsat diskutrymme?

176
00:11:11,850 --> 00:11:18,060
Om du har ett par HTML-filer, ett par PHP, ett par bilder -

177
00:11:18,060 --> 00:11:20,060
det är bara ett par megabyte, och så

178
00:11:20,060 --> 00:11:23,110
brukar jag bara gå för kanske ett par gigabyte värde av utrymme,

179
00:11:23,110 --> 00:11:27,990
och det kan vara tillräckligt för att börja mig tills jag behöver mer.

180
00:11:27,990 --> 00:11:31,480
>> Slutligen kan de sätta begränsningar för vilken typ av - hur många databaser du kan ha.

181
00:11:31,480 --> 00:11:34,760
Kanske du kan bara ha en databas. Kanske du kan ha 2. Kanske du kan ha 10.

182
00:11:34,760 --> 00:11:38,330
Är det verkligen viktigt för dig hur många du får?

183
00:11:38,330 --> 00:11:40,330
Saker att ställa dig själv.

184
00:11:40,330 --> 00:11:42,330
Och slutligen, bara saker som språk.

185
00:11:42,330 --> 00:11:44,330
Stöder de PHP? Stöder de MySQL?

186
00:11:44,330 --> 00:11:49,010
De flesta webbhotell webbplatser stöder dessa eftersom de är fria. De är öppen källkod.

187
00:11:49,010 --> 00:11:51,190
Det kostar dem något att ge dem till dig.

188
00:11:51,190 --> 00:11:55,680
Men om du vill använda, säger, Ruby eller Python eller några av dessa andra språk -

189
00:11:55,680 --> 00:11:59,490
de kan inte stödja dem på deras server, så det är viktigt att leta efter sådana saker.

190
00:11:59,490 --> 00:12:05,620
>> Och slutligen, de tillåter dig att göra några mer avancerade saker som SSL eller cron jobb?

191
00:12:05,620 --> 00:12:12,060
SSL är ett alternativ där du kan göra din webbplats säkrare genom att göra det HTTPS

192
00:12:12,060 --> 00:12:14,060
och kryptera dina anslutningar.

193
00:12:14,060 --> 00:12:17,230
Och cron-jobb är bara kanske skript som du vill köra

194
00:12:17,230 --> 00:12:19,510
var 5 minuter, var 10 minuter, var 15.

195
00:12:19,510 --> 00:12:22,030
Många delad hosting webbplatser sätter begränsningar

196
00:12:22,030 --> 00:12:26,310
på antalet cron-jobb som du kan köra eftersom det tar upp mer resurser.

197
00:12:26,310 --> 00:12:31,800
>> Och slutligen, precis allt annat som du vill titta på - se exakt vad som händer

198
00:12:31,800 --> 00:12:35,180
innan du köper ditt webbhotell paket.

199
00:12:35,180 --> 00:12:37,720
Och slutligen, prestanda. Prestanda är enorm.

200
00:12:37,720 --> 00:12:39,740
Hur snabbt är min hemsida kommer att köra?

201
00:12:39,740 --> 00:12:42,950
De flesta användare kommer inte att vänta ens sekunder för din webbplats att köra

202
00:12:42,950 --> 00:12:47,640
innan de får bara uttråkad, och de går vidare till MeanBase och börja titta på bilderna

203
00:12:47,640 --> 00:12:52,240
av katter - ni vet det händer, och du vill vara säker på att du får den användaren ombord

204
00:12:52,240 --> 00:12:54,300
och att du har bra upptid vilket bara innebär att

205
00:12:54,300 --> 00:12:56,300
din webbplats kommer att vara tillgänglig hela tiden.

206
00:12:56,300 --> 00:13:01,880
Många värdar har riktigt dålig upptid och som bara innebär att din webbplats inte kommer att vara

207
00:13:01,880 --> 00:13:06,500
tillgänglig, och du vill inte att det ska ske eftersom du kan vara ledsen.

208
00:13:06,500 --> 00:13:10,360
Och du kan även spåra din värd prestanda med webbplatser som

209
00:13:10,360 --> 00:13:16,440
Pingdom.com eller Host-tracker.com, och de berättar bara hur ofta är din sajt nere.

210
00:13:16,440 --> 00:13:18,490
>> Och slutligen, vill du se om deras stöd.

211
00:13:18,490 --> 00:13:21,890
Om du har ett problem kommer de att svara dig inom 24 timmar?

212
00:13:21,890 --> 00:13:23,890
Kommer de att svara dig inom 48 timmar?

213
00:13:23,890 --> 00:13:26,500
Det webbhotell som jag använder normalt svarar för mig inom minuter

214
00:13:26,500 --> 00:13:29,760
vilket är riktigt trevligt.

215
00:13:29,760 --> 00:13:33,990
Puh! Okej! Det är dags för en paus. Men jag tänker inte ge det till dig.

216
00:13:33,990 --> 00:13:38,200
Vi ska bara titta på bilder av söta katter då och då.

217
00:13:38,200 --> 00:13:42,740
>> En annan riktigt, riktigt stor sak är kompatibilitet med olika webbläsare.

218
00:13:42,740 --> 00:13:45,890
Vad menar jag med kompatibilitet med olika webbläsare?

219
00:13:45,890 --> 00:13:50,970
Du vet, numera är det inte bara Microsoft Internet Explorer.

220
00:13:50,970 --> 00:13:53,970
Det är inte bara Mozilla Firefox eller Safari.

221
00:13:53,970 --> 00:13:58,190
Nu har vi Chrome. Vi har Opera. Vi har Dolphin. Vi har Camino.

222
00:13:58,190 --> 00:14:00,540
Vi har Erövraren. Vi har alla dessa olika webbläsare.

223
00:14:00,540 --> 00:14:05,950
Saker som kommer ut nu - RockMelt - även om de är alla baserade på Chromium.

224
00:14:05,950 --> 00:14:10,990
Men faktum är, det är inte bara en webbläsare längre.

225
00:14:10,990 --> 00:14:13,860
Du är inte bara tittar på dessa webbsidor med en ansökan.

226
00:14:13,860 --> 00:14:17,660
Och så kommer olika webbläsare reagera på olika HTML, olika CSS, och

227
00:14:17,660 --> 00:14:21,210
annorlunda JavaScript annorlunda, och hur hanterar ni det?

228
00:14:21,210 --> 00:14:24,370
Tja, i vissa fall, kan du verkligen inte.

229
00:14:24,370 --> 00:14:29,160
Din webbplats - om det fungerar i en webbläsare, kommer den kod som du skrev fungerar inte

230
00:14:29,290 --> 00:14:32,910
i en annan webbläsare, och det är ditt jobb att se till att den kod som du skriver

231
00:14:32,910 --> 00:14:36,000
är universell, att det fungerar överallt.

232
00:14:36,000 --> 00:14:38,000
Så detta är verkligen farligt.

233
00:14:38,000 --> 00:14:42,450
Om du säger, "Ja, det fungerar på min dator. Great! Låt oss gå vidare."

234
00:14:42,450 --> 00:14:46,040
Tja, är det förmodligen inte kommer att fungera på min, och när jag går till din webbplats

235
00:14:46,040 --> 00:14:49,210
Jag kommer att bli mycket ledsen, och jag kommer att lämna direkt.

236
00:14:49,210 --> 00:14:51,570
Så, låt oss se hur du kan förhindra detta.

237
00:14:51,570 --> 00:14:55,520
>> Det första är naturligtvis att bara använda standard HTML, CSS och JavaScript.

238
00:14:55,520 --> 00:14:57,520
Vad menar jag med det?

239
00:14:57,520 --> 00:15:00,180
Tja, det finns en hel del inte vanliga saker där ute.

240
00:15:00,180 --> 00:15:03,490
Till exempel i CSS finns det många versioner.

241
00:15:03,490 --> 00:15:10,830
Om du ser några CSS-regler med-moz-eller-webkit-, dessa regler är särskilda

242
00:15:10,830 --> 00:15:15,720
till både Mozilla webbläsare och WebKit webbläsare,

243
00:15:15,720 --> 00:15:20,590
och så du vill vara säker på att du kanske vill undvika dessa saker

244
00:15:20,590 --> 00:15:25,150
eftersom om du använder-moz-den regeln bara kommer att fungera på Firefox.

245
00:15:25,150 --> 00:15:29,640
Och om du verkligen vill att det ska se bra ut på Internet Explorer också,

246
00:15:29,640 --> 00:15:31,640
du kommer att vara ute på tur.

247
00:15:31,640 --> 00:15:37,910
För HTML också, kan du göra saker i HTML som fungerar i en webbläsare

248
00:15:37,910 --> 00:15:41,830
men att avbrott i en annan, och du vill undvika att så mycket som möjligt.

249
00:15:41,830 --> 00:15:44,830
Och slutligen för JavaScript ens - det finns många versioner av JavaScript,

250
00:15:44,830 --> 00:15:50,570
och denna sommar vi sprang in i ett problem där Document.getElementsByClassName--

251
00:15:50,570 --> 00:15:54,500
som vanligtvis är en funktion som är definierad som en del av JavaScript standard -

252
00:15:54,500 --> 00:15:58,120
var inte att hitta i Internet Explorer 8.

253
00:15:58,120 --> 00:16:01,900
Så, under sommaren jag jobbade i ett labb och vi byggde nätet experiment.

254
00:16:01,900 --> 00:16:06,210
Och vi tyckte det fungerade riktigt bra tills vi insåg användare som använder

255
00:16:06,210 --> 00:16:09,780
Internet Explorer 8 inte kunde lämna in sina resultat.

256
00:16:09,780 --> 00:16:13,200
Vi miste om en hel del data. Det gjorde oss verkligen sorgligt.

257
00:16:13,200 --> 00:16:17,790
Så, vill du alltid vara säker på att dina skript kommer att fungera överallt.

258
00:16:17,790 --> 00:16:20,500
>> Och slutligen, använd validator.w3.org

259
00:16:20,500 --> 00:16:22,770
vilket är vad vi säger att du ska göra i pset 7.

260
00:16:22,770 --> 00:16:24,530
Se till att dina sidor är validerade.

261
00:16:24,530 --> 00:16:28,310
Det är viktigt eftersom det åtminstone är ett första steg sanity check.

262
00:16:28,310 --> 00:16:31,870
Är min kod egentligen standarder kompatibel?

263
00:16:34,930 --> 00:16:39,320
Ett annat sätt att sortera på att hjälpa dig se till att din webbplats kommer att fungera

264
00:16:39,320 --> 00:16:42,610
i de flesta fall är att kanske använda vissa bibliotek och ramverk

265
00:16:42,610 --> 00:16:46,210
eftersom dessa riktigt smarta utvecklare har tänkt på dessa frågor för dig.

266
00:16:46,210 --> 00:16:49,850
De har gått igenom och de har skrivit olika funktioner som fungerar i olika webbläsare.

267
00:16:49,850 --> 00:16:53,560
Till exempel använder vi jQuery i Pset 7.

268
00:16:53,560 --> 00:16:58,030
Även om du kanske inte har sett det, ger jQuery en massa funktioner

269
00:16:58,030 --> 00:17:00,280
som annars skulle ha att skriva själv.

270
00:17:00,280 --> 00:17:05,310
Men dessa utvecklare skrev det, och de såg till att det fungerar i alla webbläsare.

271
00:17:05,310 --> 00:17:10,280
Och Bootstrap - vilket är en annan CSS-ramverk som vi visade dig i Pset 7 -

272
00:17:10,280 --> 00:17:17,000
Det tar verkligen bort en hel del huvudvärk med att designa webbsidor som ser bra ut.

273
00:17:17,000 --> 00:17:19,000
i alla webbläsare.

274
00:17:19,000 --> 00:17:23,660
>> Och slutligen, om du kan undvika det, undviker jag brukar koda från grunden.

275
00:17:23,660 --> 00:17:28,079
Om du bara skapa en webbplats för din skola klubb, till exempel,

276
00:17:28,079 --> 00:17:33,920
och allt du behöver göra är att visa några sidor och kanske har din president gå in

277
00:17:33,920 --> 00:17:38,910
och ändra några saker här och där - det finns egentligen ingen anledning att kod som upp själv.

278
00:17:38,910 --> 00:17:40,910
Det tar mycket av din tid.

279
00:17:40,910 --> 00:17:42,660
Det tar en hel del av din energi, och du måste gå igenom och du måste ta reda på,

280
00:17:42,660 --> 00:17:45,930
väl, detta kommer att se bra ut i den här webbläsaren, kommer det att se bra ut i den här webbläsaren.

281
00:17:45,930 --> 00:17:50,610
Kanske använda en del av dessa fläckar som andra redan har skrivit för dig, liksom

282
00:17:50,610 --> 00:17:52,610
WordPress eller Joomla eller Drupal.

283
00:17:52,610 --> 00:17:59,400
Dessa kallas innehåll - dessa kallas CMS som i princip är bara paket som

284
00:17:59,400 --> 00:18:03,020
redan kommit gjort för dig, och du kan hämta dem, sätta dem på din server,

285
00:18:03,020 --> 00:18:07,510
och anpassa dem hur du vill, och du redan har en fungerande webbplats.

286
00:18:07,510 --> 00:18:11,680
Dessa koden paket är något att titta in till.

287
00:18:11,680 --> 00:18:15,400
Dessa saker är öppen källkod om du går för något liknande -

288
00:18:15,400 --> 00:18:19,390
om du letar efter en form paket, det finns saker som inte är gratis som

289
00:18:19,390 --> 00:18:21,570
VBulletin eller IP.Board.

290
00:18:21,570 --> 00:18:23,790
Om du inte behöver några av dessa avancerade funktioner,

291
00:18:23,790 --> 00:18:27,530
Du kan alltid välja det fria alternativet.

292
00:18:27,530 --> 00:18:31,300
>> Och slutligen, är det inga undvika det.

293
00:18:31,300 --> 00:18:33,300
Du måste testa, testa, testa.

294
00:18:33,300 --> 00:18:37,690
Du måste testa din kod på alla dessa webbläsare och på alla dessa plattformar.

295
00:18:37,690 --> 00:18:44,110
Och du vet, IE6 - har tack och lov folk började röra sig bort från IE6

296
00:18:44,110 --> 00:18:49,190
eftersom tillbaka i dag, kanske ett par år sedan, hade webbutvecklare att alltid, alltid,

297
00:18:49,190 --> 00:18:55,280
alltid smickra IE6 svagheter i att följa normerna.

298
00:18:55,280 --> 00:19:00,860
Webbplatser såg bara typ av 1990-talet i brist på ett bättre sätt att handskas med det.

299
00:19:00,860 --> 00:19:04,380
Du kan också använda webbläsaren skärmdumpar för att kontrollera din CSS.

300
00:19:04,380 --> 00:19:08,100
En riktigt cool hemsida är browserlab.adobe.com.

301
00:19:08,100 --> 00:19:11,070
Detta är en kostnadsfri tjänst tas ut av Adobe.

302
00:19:11,070 --> 00:19:15,160
Och vad de gör är att de kan ta skärmdumpar av din webbplats

303
00:19:15,160 --> 00:19:18,890
kör under olika förhållanden - som att springa i olika webbläsare,

304
00:19:18,890 --> 00:19:22,660
körs under olika plattformar - och visar dig hur de ser ut.

305
00:19:22,660 --> 00:19:33,260
Bara för att visa dig vad jag menar här, skapade jag en hemsida förra året som heter Life At Harvard,

306
00:19:33,260 --> 00:19:39,150
och vad jag försökte göra - jag försökte göra my.harvard bättre.

307
00:19:39,150 --> 00:19:43,840
För om du var här förra året, gjorde my.harvard ser inte som det ser ut nu.

308
00:19:43,840 --> 00:19:46,640
Det ser lite äckligt.

309
00:19:46,640 --> 00:19:50,470
Men nu ser det mycket bättre.

310
00:19:50,470 --> 00:19:57,070
Min genomförandet var inte så bra längre, men i alla fall,

311
00:19:57,070 --> 00:20:01,310
du vet, jag försökte lägga - (ohörbart) många vad -

312
00:20:01,310 --> 00:20:04,680
och det ser ut - det ser väldigt bra ut på min dator.

313
00:20:04,680 --> 00:20:08,560
Och sedan, kanske om jag hade haft mer tid skulle jag ha gått på till webbläsaren labb,

314
00:20:08,560 --> 00:20:13,020
och jag skulle ha tittat på, väl, hur det ser ut i Chrome 18 på Windows.

315
00:20:13,020 --> 00:20:17,060
Jag skulle rulla ner och jag skulle se - oh no! Titta på meddelanden rutan.

316
00:20:17,060 --> 00:20:20,200
Min text överfulla. Så, det är illa, va?

317
00:20:20,200 --> 00:20:23,700
Om en användare använder Chrome på Windows och kommer till min hemsida,

318
00:20:23,700 --> 00:20:26,730
som ser genast mycket oprofessionellt.

319
00:20:26,730 --> 00:20:30,760
Så ska jag gå in i min CSS och ta reda på vilken del av mitt CSS bryter här.

320
00:20:30,760 --> 00:20:35,090
Varför är det inte visas korrekt och fixa det så att alla användare kan se samma webbplats

321
00:20:35,090 --> 00:20:37,770
och vara lika glad.

322
00:20:37,770 --> 00:20:44,280
>> Och slutligen, ja, webbläsare skärmdumpar är trevligt för att testa din CSS,

323
00:20:44,280 --> 00:20:46,020
men hur är din JavaScript?

324
00:20:46,020 --> 00:20:48,660
Vad händer om du har några komplicerade skript som körs?

325
00:20:48,660 --> 00:20:50,460
Tja, kan du alltid göra virtualisering.

326
00:20:50,460 --> 00:20:56,360
Om du har en Mac kan du använda Bootcamp eller VMWare att virtualisera kanske en kopia av

327
00:20:56,360 --> 00:20:59,540
Windows och använda Internet Explorer där.

328
00:20:59,540 --> 00:21:03,400
Eller så kan du gå vidare till något som Spoon.net, som tyvärr bara fungerar på PC.

329
00:21:03,400 --> 00:21:05,290
Men vad de gör är väldigt cool.

330
00:21:05,290 --> 00:21:10,080
De virtualisera programvara för dig så att du kan köra olika versioner av IE, till exempel.

331
00:21:10,080 --> 00:21:12,080
Du kan köra olika versioner av Firefox.

332
00:21:12,080 --> 00:21:15,720
Du kan köra olika versioner av Safari och testa alla dina webbplatser där.

333
00:21:15,720 --> 00:21:18,360
Tyvärr är de inte gratis.

334
00:21:18,360 --> 00:21:20,860
Det är en betaltjänst, så det finns alltid sorts här -

335
00:21:20,860 --> 00:21:26,070
det finns alltid sorts denna avvägning mellan, ja, jag kommer att göra min hemsida ser bra ut.

336
00:21:26,070 --> 00:21:31,970
I så fall kanske jag måste betala för vissa tjänster för att hjälpa mig att göra det.

337
00:21:31,970 --> 00:21:35,890
Eventuella frågor på denna punkt om något som vi pratade om?

338
00:21:38,500 --> 00:21:41,210
Awesome. Okej.

339
00:21:41,210 --> 00:21:43,870
>> Nu har vi fler saker att prata om.

340
00:21:43,870 --> 00:21:45,820
Hur fel?

341
00:21:45,820 --> 00:21:48,670
Hur tror du att din webbplats kommer att fungera även när

342
00:21:48,670 --> 00:21:50,150
det sker något dåligt?

343
00:21:50,150 --> 00:21:53,940
Kanske du inte har en sida som heter food.php.

344
00:21:53,940 --> 00:21:57,000
Men jag, jag går till din webbplats och jag försöker komma åt food.php.

345
00:21:57,000 --> 00:22:00,770
Ska du bara för att visa mig att vita sidan som säger 404 - Filen hittades inte?

346
00:22:00,770 --> 00:22:04,400
Eller kommer ni att säga, "Ja, jag är ledsen att jag inte kunde hitta det för dig,

347
00:22:04,400 --> 00:22:08,520
men kanske här är några andra resurser som hjälper dig att söka efter vad du behöver. "

348
00:22:08,520 --> 00:22:13,180
Andra fel - så är det här som kallas HTTP-fel som är bara några felkoder

349
00:22:13,180 --> 00:22:17,130
att din server kan ha skickats tillbaka till webbläsaren i händelse av något dåligt händer.

350
00:22:17,130 --> 00:22:20,160
400 - Bad Request. 401 - Otillåten.

351
00:22:20,160 --> 00:22:25,560
403 är typ av vanligt när du har en katalog som inte är tänkt att nås

352
00:22:25,560 --> 00:22:27,310
av användaren, men användaren försöker ändå.

353
00:22:27,310 --> 00:22:30,840
Och 500 - Internal Server Error - som vanligtvis händer när du har något

354
00:22:30,840 --> 00:22:33,070
riktigt dåligt händer med din PHP-kod.

355
00:22:33,070 --> 00:22:36,140
Men i alla fall, dessa typer av webbläsare - gör dessa typer av fel händer.

356
00:22:36,140 --> 00:22:40,550
>> Så, hur gör du se till att du graciöst hanterar dessa fel

357
00:22:40,550 --> 00:22:43,230
och se till att användaren inte bara sorts hänger där?

358
00:22:46,850 --> 00:22:48,850
Här kommer. Htaccess.

359
00:22:48,850 --> 00:22:51,300
Nu,. Htaccess är något som fungerar på Apache-servrar,

360
00:22:51,300 --> 00:22:55,550
något som fungerar och fungerar på några andra servrar också.

361
00:22:55,550 --> 00:23:01,350
Detta är bara ett sätt för dig att konfigurera servern så att

362
00:23:01,350 --> 00:23:04,470
du kan göra det göra vad du vill att den ska göra.

363
00:23:04,470 --> 00:23:06,790
Vissa saker du kan göra. Du kan kontrollera dina cacheinställningar.

364
00:23:06,790 --> 00:23:11,290
Kanske finns det en viss sida på din webbplats som du ser till att användaren

365
00:23:11,290 --> 00:23:14,740
åter hämta varje gång användaren kommer och besöker din webbplats.

366
00:23:14,740 --> 00:23:26,980
Eller kanske du har någon URL som är som yoursite.com / test / html / pages / hello.html

367
00:23:26,980 --> 00:23:31,270
och du vill bara att vara yourname.com / hello -. väl, kan du använda htaccess

368
00:23:31,270 --> 00:23:34,760
att omdirigera en webbsida till en annan.

369
00:23:34,760 --> 00:23:36,600
Du kan också använda den för att göra autentisering.

370
00:23:36,600 --> 00:23:39,890
Kanske finns det vissa delar av din webbplats som du behöver för att använda ett annat lösenord.

371
00:23:39,890 --> 00:23:42,620
Du kan blockera vissa IP-adresser, blockera vissa domäner.

372
00:23:42,620 --> 00:23:46,770
Kanske du bara verkligen inte gillar Harvard studenter använder din webbplats.

373
00:23:46,770 --> 00:23:49,910
Tja, har du möjlighet att blockera alla Harvard IP-adresser.

374
00:23:49,910 --> 00:23:56,370
>> Slutligen, kan du behandla saker - du kan skriva viss kod för att göra din server

375
00:23:56,370 --> 00:24:03,100
behandla som. zhao eller. ditt namn eller. hello sidor som PHP-kod.

376
00:24:03,100 --> 00:24:05,170
Kanske det kommer att vara användbar. Kanske det inte kommer att bli.

377
00:24:05,170 --> 00:24:07,980
Och slutligen, kan du använda den för att hantera fel svar.

378
00:24:07,980 --> 00:24:10,300
Vad menar jag med det?

379
00:24:10,300 --> 00:24:16,030
Om du bara lägga koden så här - ErrorDocument 404 och sedan hänvisa dem till någon

380
00:24:16,030 --> 00:24:20,440
fel sida, kan du vara säker på att användaren inte bara ser det riktigt, riktigt ful

381
00:24:20,440 --> 00:24:23,550
404 och visa dem något trevligt.

382
00:24:23,550 --> 00:24:29,000
>> Låt oss verkligen ta en titt på hur vi kan göra det med din Pset 7.

383
00:24:29,000 --> 00:24:34,190
Här är jag i min apparat.

384
00:24:34,190 --> 00:24:38,440
Jag kommer att öppna Chrome, och sedan ska jag försöka komma åt en sida

385
00:24:38,440 --> 00:24:43,350
som inte existerar på CS50 Finance.

386
00:24:43,350 --> 00:24:52,710
Så, lokal värd - cats.php--så, märker att jag skapade ett fel dokument

387
00:24:52,710 --> 00:24:54,770
som säger, "Canz inte hitta z sida!"

388
00:24:54,770 --> 00:24:56,990
Den har en mycket sorglig katt på det.

389
00:24:56,990 --> 00:24:59,910
Om du går på Twitter, om du går på någon av dessa andra platser,

390
00:24:59,910 --> 00:25:02,700
du inte kan hitta en sida, försöker de oftast att visa en gullig bild

391
00:25:02,700 --> 00:25:04,850
så att du inte är alltför besviken.

392
00:25:04,850 --> 00:25:07,830
Du kan också ha något som är mer professionell som säger,

393
00:25:07,830 --> 00:25:11,760
Ja, jag är ledsen att jag inte kunde hitta den sidan, men kanske här finns en sökruta.

394
00:25:11,760 --> 00:25:16,750
Eller kanske här är några länkar som hjälper dig att hitta den länk som du vill.

395
00:25:16,750 --> 00:25:21,410
Så, hur gör jag detta? Hur är det ens möjligt?

396
00:25:21,410 --> 00:25:23,500
Om vi ​​går in i vår terminal här -

397
00:25:23,500 --> 00:25:26,300
Jag kommer bara att zooma in lite -

398
00:25:26,300 --> 00:25:30,110
märker att jag har en ny sida.

399
00:25:30,110 --> 00:25:34,440
Inuti min HTML katalog den heter - du kan inte se det -

400
00:25:34,440 --> 00:25:37,280
det kallas error.php.

401
00:25:37,280 --> 00:25:41,010
Och error.php är bara en fil som jag gjorde

402
00:25:41,010 --> 00:25:43,030
som visar att själva sidan.

403
00:25:43,030 --> 00:25:46,710
Jag kan visa dig vad error.php är.

404
00:25:46,710 --> 00:25:48,710
Det är precis den här sidan.

405
00:25:48,710 --> 00:25:50,710
Den säger, "Åh nej! Canz inte hitta z sida!"

406
00:25:50,710 --> 00:25:58,630
Och, om du vill se - så, märker att htaccess sortens är ett konstigt namn..

407
00:25:58,630 --> 00:26:01,040
Det börjar med en punkt, vilket innebär att det är en systemfil.

408
00:26:01,040 --> 00:26:03,360
Det är en dold fil som normalt inte visas.

409
00:26:03,360 --> 00:26:09,060
Om du gör ls-a, kan du se alla dolda filer i en viss katalog,

410
00:26:09,060 --> 00:26:12,030
och faktiskt, ser du. htaccess är en av dem.

411
00:26:12,030 --> 00:26:15,490
Låt oss gå vidare och öppna htaccess. -

412
00:26:15,490 --> 00:26:19,830
med gedit -

413
00:26:19,830 --> 00:26:26,870
Boom! Allt jag har är en linje i det - Fel dokument för 404 fel

414
00:26:26,870 --> 00:26:28,760
som också är känd som fil-inte-fel som hittats.

415
00:26:28,760 --> 00:26:32,720
Låt oss omdirigera dem till något som kallas error.php.

416
00:26:36,100 --> 00:26:42,030
Du kan ha roliga saker som canz inte hitta z sida!

417
00:26:42,030 --> 00:26:46,770
Och det finns också mycket coola saker som du kan göra med. Htaccess.

418
00:26:46,770 --> 00:26:49,520
Om du vill se mer. Htaccess magi,

419
00:26:49,520 --> 00:26:56,470
Detta är en väldigt cool hemsida att gå till - det kallas javascriptkit.com/howto/htaccess.shtml--

420
00:26:56,470 --> 00:27:01,880
Om du vill utföra mer server magi. Och det kan vara väldigt roligt.

421
00:27:01,880 --> 00:27:05,490
>> Puh! Okej! Mer söta bilder.

422
00:27:05,490 --> 00:27:10,060
Detta är en kille som gör armhävningar, och hans katt försöker hjälpa. Jag tycker det är väldigt gulligt.

423
00:27:10,060 --> 00:27:14,830
Tyvärr har jag inte en katt som.

424
00:27:14,830 --> 00:27:17,640
Okej. Så, vi har pratat om. Htaccess.

425
00:27:17,640 --> 00:27:19,640
Vi har pratat om felhantering.

426
00:27:19,640 --> 00:27:20,940
Vi har pratat om webbhotell, domännamn.

427
00:27:20,940 --> 00:27:23,230
Vi har pratat om kompatibilitet med olika webbläsare.

428
00:27:23,230 --> 00:27:25,210
Så hur ser vi till att din webbplats faktiskt utför?

429
00:27:25,210 --> 00:27:26,950
Hur kan vi se till att om jag går till din webbplats

430
00:27:26,950 --> 00:27:29,830
Jag kan se din sida inom några sekunder?

431
00:27:29,830 --> 00:27:33,520
En av de saker som jag tror att folk bara sorts glömma

432
00:27:33,520 --> 00:27:36,160
är bildoptimering.

433
00:27:36,160 --> 00:27:37,560
Låt oss säga att du ville lägga in en bild på din webbplats

434
00:27:37,560 --> 00:27:40,330
och det är 2 MG stor.

435
00:27:40,330 --> 00:27:42,670
Det kan vara bra för oss eftersom vi är vid Harvard,

436
00:27:42,670 --> 00:27:45,000
och vi har en mycket snabb Internetanslutning.

437
00:27:45,000 --> 00:27:47,470
Men tänk någon i Kina. Föreställ någon i Indien.

438
00:27:47,470 --> 00:27:52,440
föreställa någon kanske i lantliga Kansas som kanske inte har samma sorts

439
00:27:52,440 --> 00:27:54,690
bredband som vi har.

440
00:27:54,690 --> 00:27:57,710
Om du har en 2 MB bild på din webbplats och användaren försöker komma åt det,

441
00:27:57,710 --> 00:28:00,890
det kommer att ta dem en riktigt lång tid att ladda ner.

442
00:28:00,890 --> 00:28:04,160
Så, om du inte behöver den sortens upplösning,

443
00:28:04,160 --> 00:28:09,220
då kan du ändra storlek på din bild med något som Adobe Photo Shop.

444
00:28:09,220 --> 00:28:13,400
Det finns ofta ett alternativ som heter säker för webb och enheter,

445
00:28:13,400 --> 00:28:15,850
och vad den gör är det remsor ut all onödig information

446
00:28:15,850 --> 00:28:20,160
och liksom komprimerar filen till en liten bildstorlek så att du kan

447
00:28:20,160 --> 00:28:22,960
lägga den på din hemsida, och alla användare som försöker ladda ned den sidan

448
00:28:22,960 --> 00:28:26,950
kommer att hämta en mindre version av din bild.

449
00:28:26,950 --> 00:28:28,230
Om du inte har Adobe Photo Shop

450
00:28:28,230 --> 00:28:32,650
webresizer.com är också en annan resurs där du kan mata in din bild

451
00:28:32,650 --> 00:28:36,470
och det kommer att spotta ut exakt samma bild,

452
00:28:36,470 --> 00:28:39,970
men det kommer att bli något liknande 3 gånger mindre.

453
00:28:39,970 --> 00:28:41,970
Så det är mycket användbar för användarna.

454
00:28:41,970 --> 00:28:45,930
>> En annan sak som du kan göra är minify koden.

455
00:28:45,930 --> 00:28:48,460
Om vi ​​tar en titt på Google.com,

456
00:28:48,460 --> 00:28:56,400
ser du att det inte är typ av samma HTML och CSS som vi är vana vid.

457
00:28:56,400 --> 00:29:02,250
Bara att titta på källkoden här.

458
00:29:02,250 --> 00:29:07,600
Om jag bara rulla ned - wow, ser det ganska motbjudande.

459
00:29:07,600 --> 00:29:09,650
Detta skulle få en nolla på stil.

460
00:29:09,650 --> 00:29:13,470
Om du kodat detta för din Pset, kommer du att få en nolla på din stil.

461
00:29:13,470 --> 00:29:16,990
Detta har inget mellanrum. Namnen ser riktigt kryptiskt.

462
00:29:16,990 --> 00:29:19,800
Det handlar verkligen upprörande.

463
00:29:19,800 --> 00:29:24,060
Och manuset till slutet i kroppen - den sista HTML -

464
00:29:24,060 --> 00:29:26,280
de är alla tillsammans - allt smushed tillsammans.

465
00:29:26,280 --> 00:29:28,280
Varför gör de det?

466
00:29:28,280 --> 00:29:30,650
De minified sin kod.

467
00:29:30,650 --> 00:29:33,310
Observera att detta dokument kommer att vara mycket mindre

468
00:29:33,310 --> 00:29:36,660
för mig att ladda ner än något med tomrum,

469
00:29:36,660 --> 00:29:39,410
än något med riktigt långa variabelnamn.

470
00:29:39,410 --> 00:29:41,710
Om du minimerar din kod du remsa ut alla tomrum.

471
00:29:41,710 --> 00:29:45,960
Naturligtvis bryr din webbläsare inte om du har något vitt utrymme i din kod.

472
00:29:45,960 --> 00:29:49,630
Du strippa ut, nu kan jag ladda ner en mindre fil -

473
00:29:49,630 --> 00:29:52,770
nu filen - det dokument som vi ska hämta har en mindre filstorlek,

474
00:29:52,770 --> 00:29:56,180
det kommer att bli snabbare för mig att ladda ner, och det är nyttigt.

475
00:29:56,180 --> 00:30:01,550
Om du arbetar med webbsidor och du lanserar en webbplats,

476
00:30:01,550 --> 00:30:04,630
det är nästan alltid bra att minimerar din kod.

477
00:30:04,630 --> 00:30:08,150
En annan anledning till varför det kan vara bra är kanske du inte vill att andra ska använda din kod.

478
00:30:08,150 --> 00:30:11,050
Kanske du inte vill att andra ska använda din CSS.

479
00:30:11,050 --> 00:30:13,460
Du vet om du verkligen ville vara snål med det,

480
00:30:13,460 --> 00:30:16,670
då kan du också minify din kod, och det skulle bli svårare för mig att stjäla den

481
00:30:16,670 --> 00:30:19,170
eftersom jag har ingen aning om vad som händer.

482
00:30:19,170 --> 00:30:22,990
Du kan också gå till webbplatser som minify.avivo.si.

483
00:30:22,990 --> 00:30:27,900
Tjänster som denna på nätet hjälper dig minify din kod så att du inte behöver göra det för hand.

484
00:30:27,900 --> 00:30:30,080
Definitivt inte göra det för hand.

485
00:30:30,080 --> 00:30:32,210
>> Okej. Nu talar om manus.

486
00:30:32,210 --> 00:30:35,040
Kanske i din PHP-kod finns det något som du inte behöver göra.

487
00:30:35,040 --> 00:30:37,910
Kanske finns det extra slingor i det.

488
00:30:37,910 --> 00:30:40,850
Vi pratade om koden design CS50.

489
00:30:40,850 --> 00:30:44,550
Även om du kodar i C om du har - om du gör extra arbete

490
00:30:44,550 --> 00:30:49,440
att du inte behöver göra, ja, det kommer att sakta ner dina skript på din webbplats,

491
00:30:49,440 --> 00:30:53,280
och detta är särskilt viktigt för webbplatser eftersom användarna numera är väldigt otålig.

492
00:30:53,280 --> 00:30:56,110
Om du gör onödigt arbete, det kommer att ta dem längre

493
00:30:56,110 --> 00:31:00,080
att få den information som de vill, och de kommer att bli mycket olycklig.

494
00:31:00,080 --> 00:31:02,200
Slutligen, kan du optimera dina databastabeller.

495
00:31:02,200 --> 00:31:05,020
Kom ihåg att vi pratade om index.

496
00:31:05,020 --> 00:31:09,420
De är inte bara bra för att se till att du har en rad som är unik.

497
00:31:09,420 --> 00:31:12,440
De är också bra för att se till att databasen fungerar snabbt.

498
00:31:12,440 --> 00:31:16,240
Om du vill läsa på som går till MySQL-dokumentationen,

499
00:31:16,240 --> 00:31:18,710
eller så kan du titta på - ja, hur gör jag optimera min databastabell?

500
00:31:18,710 --> 00:31:23,350
Hur kan jag vara säker på att jag har index som hjälper mig att få den information snabbare?

501
00:31:23,350 --> 00:31:27,300
>> Det finns också små knep som du kan använda som caching.

502
00:31:27,300 --> 00:31:28,980
Om du har PHP - om du har en blogg, till exempel,

503
00:31:28,980 --> 00:31:31,980
och du har - och den drivs av PHP eller något annat språk -

504
00:31:31,980 --> 00:31:37,690
du kan cache din blogg på låt oss säga 50-minuters intervall så att du kan tjäna statiska sidor

505
00:31:37,690 --> 00:31:40,610
eller statisk HTML till besökarna till din webbplats.

506
00:31:40,610 --> 00:31:43,380
På så sätt användarna inte behöver köra PHP script varje gång,

507
00:31:43,380 --> 00:31:47,410
och kanske som kommer att vara snabbare för dem att få tillgång till denna information.

508
00:31:47,410 --> 00:31:49,410
>> Och slutligen, kan du använda något som CDN.

509
00:31:49,410 --> 00:31:51,900
Observera att när du hämtar en Pset,

510
00:31:51,900 --> 00:31:54,890
du alltid gå till CDN.CS50.net. Varför är det?

511
00:31:54,890 --> 00:32:01,540
CS50 använder också ungefär som ett CDN - ett nätverk distribution av innehåll -

512
00:32:01,540 --> 00:32:06,120
vilket betyder bara att det är ett gäng servrar kanske någonstans runt om i världen

513
00:32:06,120 --> 00:32:08,120
att hjälpa tjäna dina sidor för besökarna.

514
00:32:08,120 --> 00:32:13,770
Om dina besökare är att få en sida från en server som är närmare dem geografiskt,

515
00:32:13,770 --> 00:32:16,770
så mest troligt dina besökare kommer att få den filen mycket snabbare.

516
00:32:16,770 --> 00:32:20,490
Det finns också källor på nätet som hjälper dig att göra det.

517
00:32:20,490 --> 00:32:24,070
En av dem är CloudFlare. De erbjuder en gratis CDN tjänst.

518
00:32:24,070 --> 00:32:26,020
Om du har stora filer som du tjänar på dina användare,

519
00:32:26,020 --> 00:32:32,260
då kanske det är bättre att sätta dem på ett CDN så att de kan få dem snabbare.

520
00:32:32,260 --> 00:32:39,070
>> Den sista frågan för dagen är sökmotoroptimering.

521
00:32:39,070 --> 00:32:41,070
Vad är sökmotoroptimering?

522
00:32:41,070 --> 00:32:44,070
Det är att se till att sökmotorer som Google eller Bing eller Yahoo

523
00:32:44,070 --> 00:32:50,740
kan gå vidare till din webbplats och söka igenom din webbplats och indexera din webbplats och när

524
00:32:50,740 --> 00:32:53,040
Jag, till exempel, gå till Google.com och jag försöker att söka efter något,

525
00:32:53,040 --> 00:32:55,040
då din webbplats kommer att dyka upp.

526
00:32:55,040 --> 00:32:57,000
Hur gör du säker på att din webbplats är en av de 10?

527
00:32:57,000 --> 00:33:00,000
För som vi alla vet, om du söker efter något på Google

528
00:33:00,000 --> 00:33:02,880
och det är inte på topp 10 som du troligtvis inte kommer att se i nästa 10.

529
00:33:02,880 --> 00:33:07,160
Detta är en slags ämne som är höljt i dunkel.

530
00:33:07,160 --> 00:33:09,850
Det finns en hel del hype där ute på Internet.

531
00:33:09,850 --> 00:33:14,680
Det finns en hel del vidskepelse om om du gör x då Google kommer att gilla dig bättre.

532
00:33:14,680 --> 00:33:16,680
Om du y då Google kommer att gilla dig bättre.

533
00:33:16,680 --> 00:33:19,680
Det är nog bättre att titta in i sökandet jättens handlingar själv.

534
00:33:19,680 --> 00:33:27,470
>> Detta är ett av de dokument på Google som visar dig exakt hur du optimerar din webbplats

535
00:33:27,470 --> 00:33:30,860
så att Google kan komma och indexera det mycket snyggt.

536
00:33:30,860 --> 00:33:33,680
Du behöver inte kopiera in denna URL eftersom denna presentation kommer att

537
00:33:33,680 --> 00:33:36,680
vara online ändå.

538
00:33:36,680 --> 00:33:38,770
Om du tittar på detta och du läser detta finns det några mycket användbara tips där.

539
00:33:38,770 --> 00:33:42,240
Google berättar - om du verkligen vill att din webbplats ska indexeras väl

540
00:33:42,240 --> 00:33:44,610
så ska du göra alla dessa saker.

541
00:33:44,610 --> 00:33:47,570
>> En annan sak som sökmotorerna verkligen gillar är färskt innehåll.

542
00:33:47,570 --> 00:33:49,500
Om du har innehåll som är uppdaterat väldigt regelbundet

543
00:33:49,500 --> 00:33:51,950
då sökmotorer säga, ooh, jag gillar din sida.

544
00:33:51,950 --> 00:33:53,950
Jag kommer att gå till din webbplats så ofta.

545
00:33:53,950 --> 00:33:56,840
Jag ska indexera en hel del av dina sidor.

546
00:33:56,840 --> 00:33:59,560
Om du har nytt innehåll då du är mer benägna att visa upp -

547
00:33:59,560 --> 00:34:02,540
du är mer sannolikt att vara mer relevant.

548
00:34:02,540 --> 00:34:04,630
Du är mer sannolikt att vara mer uppdaterad,

549
00:34:04,630 --> 00:34:08,860
och sökmotorer är mer benägna att sätta din webbplats framför andra.

550
00:34:08,860 --> 00:34:10,860
>> Djupa länkar är också viktigt.

551
00:34:10,860 --> 00:34:13,530
Om du ville verkligen din webbplats för att se bra ut i en sökmotors ögon

552
00:34:13,530 --> 00:34:18,090
har en massa andra webbplatser kopplade till den och kopplat djupt in din hemsida.

553
00:34:18,090 --> 00:34:20,090
Inte bara länka till din hemsida.

554
00:34:20,090 --> 00:34:26,719
Länk till kanske yourname.com / något / något / something.php.

555
00:34:26,719 --> 00:34:29,840
Det - en sökmotor - medel, wow, de har verkligen intressant innehåll

556
00:34:29,840 --> 00:34:35,350
att någon annan länkning så djupt in i deras webbplats som jag borde verkligen, verkligen

557
00:34:35,350 --> 00:34:38,260
lägga mer vikt på att webbplatsens sidor.

558
00:34:38,260 --> 00:34:41,940
>> Om du har korrekta sidtitlar, om du inte har några fel som är bra eftersom

559
00:34:41,940 --> 00:34:44,670
Om en sökmotor försöker att besöka din webbplats, och det blir ett fel,

560
00:34:44,670 --> 00:34:46,780
Det kommer förmodligen att ge upp mycket, mycket snart.

561
00:34:46,780 --> 00:34:49,510
Och slutligen, vill du ha en snabb laddningstid eftersom sökmotorer -

562
00:34:49,510 --> 00:34:53,820
precis som människor - inte ha mycket tålamod för långsamma webbplatser.

563
00:34:53,820 --> 00:34:57,070
Detta är ett sätt för dig att se till att du visar upp högre i

564
00:34:57,070 --> 00:35:01,390
sökmotor sökfrågor och förhoppningsvis därigenom få mer trafik.

565
00:35:01,390 --> 00:35:04,730
För efter allt du har spenderat all denna tid att utveckla din webbplats.

566
00:35:04,730 --> 00:35:06,280
Du tillbringade hela denna tid lansera denna hemsida på nätet.

567
00:35:06,280 --> 00:35:11,780
Du vill vara säker på att du har massor av användare som faktiskt ser ditt innehåll.

568
00:35:13,330 --> 00:35:15,660
>> Andra bra resurser att använda.

569
00:35:15,660 --> 00:35:19,210
Google Webmaster Tools är något att titta in till.

570
00:35:19,210 --> 00:35:21,780
Detta hjälper bara dig att se - Google inte indexerar min plats.

571
00:35:21,780 --> 00:35:24,490
Vilka typer av fel är det möter?

572
00:35:24,490 --> 00:35:27,490
Hur många sidor har det indexeras?

573
00:35:27,490 --> 00:35:29,490
Vad betyder det tycker är det viktigaste innehållet på min sida?

574
00:35:29,490 --> 00:35:31,490
Kanske det är inte vad jag vill att det ska vara.

575
00:35:31,490 --> 00:35:36,880
Kanske jag måste ändra min hemsida lite så att det återspeglas bättre

576
00:35:36,880 --> 00:35:38,880
vad min hemsida egentligen handlar om.

577
00:35:38,880 --> 00:35:41,000
Google Analytics är ett riktigt coolt verktyg.

578
00:35:41,000 --> 00:35:44,120
Du kan lägga till en liten bit av JavaScript på dina sidor.

579
00:35:44,120 --> 00:35:47,020
Och sedan efteråt kan du gå till Google Analytics, och det kommer att spåra

580
00:35:47,020 --> 00:35:49,020
dina besökare demografi och din webbplats tillväxt.

581
00:35:49,020 --> 00:35:51,810
Det kommer att berätta exakt hur många besökare besöker din webbplats

582
00:35:51,810 --> 00:35:55,310
inom en viss dag, inom en viss timme, inom en viss vecka.

583
00:35:55,310 --> 00:35:57,310
Hur många besökare från Kina? Hur många besökare från Antarktis -

584
00:35:57,310 --> 00:35:59,310
du får till din webbplats.

585
00:35:59,310 --> 00:36:03,470
det kan vara något coolt att se eller kan det även vara bra

586
00:36:03,470 --> 00:36:05,470
eftersom du försöker rikta en viss grupp.

587
00:36:05,470 --> 00:36:08,410
Kanske du försöker rikta tonåringar med din webbplats, och du ser att

588
00:36:08,410 --> 00:36:11,410
flesta besökare till din webbplats är kanske 30 - till 40-åringar,

589
00:36:11,410 --> 00:36:15,130
då kanske antingen du har ett problem eller du kan bara säga,

590
00:36:15,130 --> 00:36:19,590
bra, då kanske jag ska bara ändra min hemsida fokus så att

591
00:36:19,590 --> 00:36:22,240
Jag fokuserar mer på den åldersgruppen.

592
00:36:22,240 --> 00:36:28,500
>> Google Apps - om du ville ha typ av e-post med ditt domännamn -

593
00:36:28,500 --> 00:36:31,230
kanske något liknande yourname@yourname.com--

594
00:36:31,230 --> 00:36:35,270
du kan använda Gmail-adresser - du kan använda Gmail

595
00:36:35,270 --> 00:36:38,500
och Google Apps är ett sätt att göra det.

596
00:36:38,500 --> 00:36:44,050
Du kan ställa in specifika e-postadresser som är specifika för ditt domännamn

597
00:36:44,050 --> 00:36:46,800
istället of@gmail.com.

598
00:36:46,800 --> 00:36:51,840
>> Och slutligen, det finns webbutvecklare förlängningar och tillägg - för Chrome,

599
00:36:51,840 --> 00:36:56,380
för Firefox, för andra webbläsare - som gör att du kan gå in och inspektera

600
00:36:56,380 --> 00:37:02,290
CSS, inspektera JavaScript, se exakt vad som är fel med din JavaScript-skript,

601
00:37:02,290 --> 00:37:05,290
och kanske det kommer att vara till nytta för din de-buggning ändamål, för dig att ta reda på -

602
00:37:05,290 --> 00:37:08,630
Tja, varför inte min hemsida visas korrekt i den här webbläsaren?

603
00:37:08,630 --> 00:37:11,800
>> Och slutligen, om du ville veta mer om alla dessa frågor -

604
00:37:11,800 --> 00:37:14,410
om du ville veta mer om HTML och CSS och Javascript -

605
00:37:14,410 --> 00:37:16,790
för efter allt, lärde vi bara en liten bit -

606
00:37:16,790 --> 00:37:21,240
du kan gå webbplatser som W3Schools.com att leta efter mer resurser.

607
00:37:21,240 --> 00:37:26,340
De har mycket fina tutorials om hur jag gör x, eller vad betyder y detta?

608
00:37:26,340 --> 00:37:30,400
Om du vill lära dig mer om dessa språk kan du helt enkelt gå hit.

609
00:37:30,400 --> 00:37:37,690
>> Okej. Jag tror att jag ville lämna de sista minuterna av detta för frågor,

610
00:37:37,690 --> 00:37:39,810
så finns det några frågor om någonting som vi pratade om?

611
00:37:39,810 --> 00:37:43,500
[Publiken] Vilka saker är på W3Schools och hur är det täckt?

612
00:37:43,500 --> 00:37:45,500
[Yuechen Zhao] Vilka saker?

613
00:37:45,500 --> 00:37:50,180
Så, är en av de allra största saker som jag använder mycket deras referenser.

614
00:37:50,180 --> 00:37:54,430
Deras referenser detalj, till exempel för CSS -

615
00:37:54,430 --> 00:37:59,480
vad detta betyder eller om du ville ändra bakgrunden på en sida -

616
00:37:59,480 --> 00:38:01,480
Hur gör du det?

617
00:38:01,480 --> 00:38:04,550
Vilka webbläsare stöder det kommandot? Saker som.

618
00:38:04,550 --> 00:38:10,870
Och då de också bara har väldigt fina tutorials på HTML, på PHP, på JavaScript,

619
00:38:10,870 --> 00:38:14,290
på MySQL, på alla möjliga olika ämnen.

620
00:38:14,290 --> 00:38:18,800
De har fina tutorials. De lär dig hur man gör saker.

621
00:38:18,800 --> 00:38:22,590
Det är trevligt att kunna gå och lära sig mer om dessa frågor.

622
00:38:22,590 --> 00:38:27,180
>> [Publiken] HTML 5 är ännu inte kompatibel med alla webbläsare där ute.

623
00:38:27,180 --> 00:38:30,700
Skulle du rekommendera bara borta från det på grund av kompatibilitetsproblem?

624
00:38:30,700 --> 00:38:32,700
Hur skulle du hantera det?

625
00:38:32,700 --> 00:38:38,640
[Yuechen Zhao] Ja, så är frågan HTML5 är fortfarande en baby standard.

626
00:38:38,640 --> 00:38:42,030
Det är inte riktigt stöds av många webbläsare, så bör vi undvika det?

627
00:38:42,030 --> 00:38:48,040
Jag tror att förra året hade jag varit en mycket stor förespråkare av, låt oss undvika HTML5

628
00:38:48,040 --> 00:38:52,430
eftersom det fortfarande - det är fortfarande mycket nytt och i själva verket HTML5 standarden

629
00:38:52,430 --> 00:38:55,610
har inte slutförts ännu.

630
00:38:55,610 --> 00:38:58,790
Och så, det är verkligen ingen HTML5-standarden.

631
00:38:58,790 --> 00:39:03,840
Men jag tror, ​​särskilt om du designar en hemsida,

632
00:39:03,840 --> 00:39:07,450
det skulle vara bättre om du bara gå med HTML5, eftersom det är typ av kommer att vara framtiden,

633
00:39:07,450 --> 00:39:11,250
och om du vill att din webbplats för att vara framtidssäkrad och du vill att din webbplats för att arbeta

634
00:39:11,250 --> 00:39:14,320
i framtida webbläsare, kan det vara bättre att börja bygga något för framtiden

635
00:39:14,320 --> 00:39:19,830
än tidigare, och dessutom bara på grund av det faktum att HTML5 är verkligen inte så annorlunda

636
00:39:19,830 --> 00:39:23,080
från HTML4 eller XHTML.

637
00:39:23,080 --> 00:39:29,780
Om du använder HTML5, det normalt kommer att fungera i de flesta webbläsare.

638
00:39:29,780 --> 00:39:34,660
Du behöver bara sortera om att gå in och se med dessa skärmdumpar

639
00:39:34,660 --> 00:39:38,630
och se med att gå in på dessa webbplatser själv.

640
00:39:38,630 --> 00:39:44,280
Men mest troligt att det kommer att fungera om du använder mycket specifika funktioner till HTML5.

641
00:39:44,280 --> 00:39:50,240
Lägg märke till också att för CS50 - till exempel för videospelare som vi använder -

642
00:39:50,240 --> 00:39:56,230
det använder HTML5 och HTML5-video för att visa föreläsningarna.

643
00:39:56,230 --> 00:39:59,420
Men om du har en riktigt gammal webbläsare, så det kommer att falla tillbaka på Flash.

644
00:39:59,420 --> 00:40:01,420
Så, det är också något annat -

645
00:40:01,420 --> 00:40:05,190
ha en reservlösning för när du bara vet att webbläsaren inte kommer att hantera

646
00:40:05,190 --> 00:40:08,140
vad du vill att den ska hantera.

647
00:40:08,140 --> 00:40:10,140
>> Övriga frågor?

648
00:40:10,140 --> 00:40:13,270
Något som vi pratade om.

649
00:40:16,910 --> 00:40:20,750
Okej. Då tror jag det är om det för mig.

650
00:40:20,750 --> 00:40:23,090
Jag tror att det är det.

651
00:40:23,090 --> 00:40:28,430
(Applåder)

652
00:40:28,430 --> 00:40:30,000
Cool.

653
00:40:30,500 --> 00:40:32,700
[CS50.TV]