1
00:00:00,000 --> 00:00:02,000
[Seminar] [Preparing Your Site for the Web]

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

3
00:00:05,000 --> 00:00:07,000
[This is CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:11,660
>> Okay. Here's another hour of web development if you guys are up for it.

5
00:00:11,660 --> 00:00:16,290
Today I'm going to be talking about preparing your site for the Web.

6
00:00:16,290 --> 00:00:20,260
All day--and probably for the past 2 weeks--

7
00:00:20,260 --> 00:00:22,240
we've been talking about how to create a website,

8
00:00:22,240 --> 00:00:24,880
how to use HTML, how to use PHP, how to use frameworks,

9
00:00:24,880 --> 00:00:29,420
how to make sure that you can interact with the database--things like that.

10
00:00:29,420 --> 00:00:34,830
But today, we're going to be talking about where your site's going to live after CS50.

11
00:00:34,830 --> 00:00:40,010
Because after all, CS50 does not happen past December.

12
00:00:40,010 --> 00:00:42,090
We're going to be talking about domain names, hosting.

13
00:00:42,090 --> 00:00:44,790
We're going to be talking about what cross-browser compatibility 

14
00:00:44,790 --> 00:00:49,540
and cross-platform compatibility are, and how you can make sure that your site

15
00:00:49,540 --> 00:00:51,610
is going to operate under all conditions.

16
00:00:51,610 --> 00:00:54,330
We'll talk about error handling and other server magic.

17
00:00:54,330 --> 00:00:57,890
We're talking about performance optimization, search engine optimization,

18
00:00:57,890 --> 00:01:00,310
and how to get people to actually visit your websites.

19
00:01:00,310 --> 00:01:05,960
And finally, just some good resources to make sure that you guys have enough of those

20
00:01:05,960 --> 00:01:09,680
to go off with your final project, and hopefully after.

21
00:01:09,680 --> 00:01:13,120
>> The first thing that we're going to talk about is domain names.

22
00:01:13,120 --> 00:01:18,020
Right now you're programming in your appliance, you're going to a local host

23
00:01:18,020 --> 00:01:20,360
which isn't actually a domain name.

24
00:01:20,360 --> 00:01:26,370
That's sort of just a nickname or an alias for your actual Linux installation

25
00:01:26,370 --> 00:01:31,150
inside of either VMware on a Mac or VMware Player on a PC.

26
00:01:31,150 --> 00:01:36,510
Domain names allow you to put a site onto the Web and then go to something like

27
00:01:36,510 --> 00:01:39,400
www.google.com and get the website.

28
00:01:39,400 --> 00:01:41,500
How do they work?

29
00:01:41,500 --> 00:01:43,390
Let's say that you're just an average web server--

30
00:01:43,390 --> 00:01:50,080
average Web surfer and you have a laptop, and you go to www.howstuffworks.com.

31
00:01:50,080 --> 00:01:52,570
You can probably see where I stole this from.

32
00:01:52,570 --> 00:01:57,300
How stuff works--your computer will then ask a local DNS server, 

33
00:01:57,300 --> 00:01:59,300
"Do you know where this website is?"

34
00:01:59,300 --> 00:02:02,200
"Do you know the IP address of www.howstuffworks.com?"

35
00:02:02,200 --> 00:02:05,580
Your DNS server might say, "Yes, I do."

36
00:02:05,580 --> 00:02:09,139
In that case, you get the IP address, and your computer accesses that IP address.

37
00:02:09,139 --> 00:02:15,050
If it does not, it asks another DNS server, "Hey! Do you know what www.howstuffworks.com is?"

38
00:02:15,050 --> 00:02:17,670
That server might say, "Yes, I do."

39
00:02:17,670 --> 00:02:22,500
So, it tells the other one what it is, and finally, that information gets passed to your computer,

40
00:02:22,500 --> 00:02:24,680
and you can access howstuffworks.com.

41
00:02:24,680 --> 00:02:27,540
>> How can you get one of these magical things?

42
00:02:27,540 --> 00:02:32,940
How can you get maybe www.yourname.com or www.ilovecats.com?

43
00:02:32,940 --> 00:02:35,350
You can register for one,

44
00:02:35,350 --> 00:02:38,280
and there are a lot of websites out there that allow you to do so.

45
00:02:38,280 --> 00:02:41,420
You must--in most circumstances you must pay for them.

46
00:02:41,420 --> 00:02:43,890
There are certain domain names that are free.

47
00:02:43,890 --> 00:02:50,900
If you go to www.co.cc or .tkdomainnames, those are free.

48
00:02:50,900 --> 00:02:56,500
But, they do come with certain restrictions, and in fact some of them might not even be

49
00:02:56,500 --> 00:03:00,540
real, top-level domain names like .com or .net.

50
00:03:00,540 --> 00:03:03,300
Normally I would suggest going for one of them 

51
00:03:03,300 --> 00:03:07,060
because users are just more comfortable with those.

52
00:03:07,060 --> 00:03:10,070
You've seen a lot of .coms. You've seen a lot of .nets.

53
00:03:10,070 --> 00:03:13,790
You probably haven't seen a lot of .co.cc's, so they're harder to remember.

54
00:03:13,790 --> 00:03:18,900
Different websites like Godaddy or NameCheap or--I used one that's

55
00:03:18,900 --> 00:03:21,550
kind of sketchy--called activedomain.com.

56
00:03:21,550 --> 00:03:24,160
It looks really sketchy, but it's worked really well for me.

57
00:03:24,160 --> 00:03:27,810
>> And finally, you have others that maybe do more advertising like Network Solutions.

58
00:03:27,810 --> 00:03:31,140
But if you go onto NetworkSolutions.com and look at their pricing

59
00:03:31,140 --> 00:03:34,070
it is really expensive. I was looking at them last night.

60
00:03:34,070 --> 00:03:37,400
For one year of a domain name, it's probably not worth that much money.

61
00:03:37,400 --> 00:03:40,210
In fact, if you're getting a .com or a .org or a .net

62
00:03:40,210 --> 00:03:43,430
the usual price is about $10 a year.

63
00:03:43,430 --> 00:03:48,710
So if you're paying a lot more than that, it's probably not that worth it

64
00:03:48,710 --> 00:03:52,440
because, after all, these websites don't do anything with that domain name.

65
00:03:52,440 --> 00:03:58,270
They just give it to you, and so if you can get it for cheap, why not?

66
00:03:58,270 --> 00:04:02,540
>> The other thing is once you have your domain name, then you probably want to 

67
00:04:02,540 --> 00:04:08,610
go on to either Godaddy.com or wherever you bought your domain name

68
00:04:08,610 --> 00:04:11,220
and set the name servers for that domain name.

69
00:04:11,220 --> 00:04:15,560
What that means is once a user goes to www.howstuffworks.com,

70
00:04:15,560 --> 00:04:20,839
those name server IP addresses are the IP addresses that they would be able to look up.

71
00:04:20,839 --> 00:04:24,680
They would be able to access your website through those name servers.

72
00:04:24,680 --> 00:04:26,830
If you apply for hosting somewhere

73
00:04:26,830 --> 00:04:31,210
then your host will most likely give you the name servers to use.

74
00:04:31,210 --> 00:04:34,210
>> And finally, there's this thing called a WHOIS.

75
00:04:34,210 --> 00:04:38,890
A WHOIS database is a database with which you could input a domain name

76
00:04:38,890 --> 00:04:44,170
and it will spit out some information about the owner of that site and other contact information.

77
00:04:44,170 --> 00:04:49,080
Now, you may say, "I don't really want my home address or I don't really want my email address

78
00:04:49,080 --> 00:04:54,010
on the website for anyone to see or on the Internet for everyone to see."

79
00:04:54,010 --> 00:04:57,740
Then you might want to use something that a lot of hosting services provide--

80
00:04:57,740 --> 00:04:59,740
like a WHOIS manager.

81
00:04:59,740 --> 00:05:03,550
A WHOIS manager is simply another service that a lot of them provide that

82
00:05:03,550 --> 00:05:07,700
hides away that information and just puts in who is manager for the name--

83
00:05:07,700 --> 00:05:13,070
for the address it's usually just that company name that's given you this domain name--

84
00:05:13,070 --> 00:05:17,350
and so then your personal information isn't being leaked on the Internet,

85
00:05:17,350 --> 00:05:19,350
which is usually pretty good.

86
00:05:19,350 --> 00:05:21,350
I myself use one of these services.

87
00:05:21,350 --> 00:05:25,630
If you don't care about your own privacy then it doesn't really matter.

88
00:05:25,630 --> 00:05:32,490
>> A DNS server stands for Domain Name System, and what it is--

89
00:05:32,490 --> 00:05:36,560
it's sort of like a hash table somewhere that says,

90
00:05:36,560 --> 00:05:42,320
 "This website address is going to map to this IP address." And that's all it is. 

91
00:05:42,320 --> 00:05:48,180
So once you query this DNS server, then you can get the IP addresses

92
00:05:48,180 --> 00:05:51,930
for that corresponding domain name and then visit that website.

93
00:05:51,930 --> 00:05:59,820
(audience member asking a question--inaudible)

94
00:05:59,820 --> 00:06:07,910
The first? The first level actually is usually just your computer cache itself.

95
00:06:07,910 --> 00:06:12,570
Your computer sort of remembers the last time that you went to www.google.com

96
00:06:12,570 --> 00:06:18,090
it was at this IP address, and then after awhile, that cache will expire,

97
00:06:18,090 --> 00:06:23,560
and it will ask like the Comcast DNS,

98
00:06:23,560 --> 00:06:26,400
"Hey, what's www.google.com?"

99
00:06:26,400 --> 00:06:31,040
Normally, when you buy a domain name and you register one, and you set up a website,

100
00:06:31,040 --> 00:06:35,670
you can't go to that website immediately with that domain name because the name servers

101
00:06:35,670 --> 00:06:40,180
across the globe don't know about your domain name yet. It has to populate.

102
00:06:40,180 --> 00:06:43,220
It usually takes about 24-48 hours.

103
00:06:43,220 --> 00:06:48,460
All right. So, that's a little bit about domain names. They're very cool.

104
00:06:48,460 --> 00:06:51,540
I think you should get one if you're serious about the project 

105
00:06:51,540 --> 00:06:55,300
and if you really want to make your project known across campus,

106
00:06:55,300 --> 00:06:58,050
having a domain name makes it look really professional.

107
00:06:58,050 --> 00:07:01,510
>> Then the next step, of course, is to have some sort of hosting.

108
00:07:01,510 --> 00:07:05,540
If you just host it on your computer, nobody's ever going to be able to go to it.

109
00:07:05,540 --> 00:07:09,110
You could potentially set up a server on your computer and keep your computer on forever,

110
00:07:09,110 --> 00:07:11,160
but that's not recommended.

111
00:07:11,160 --> 00:07:14,000
There are different kinds of hosting online available.

112
00:07:14,000 --> 00:07:21,870
There's shared hosting. There's VPN (unintelligible) which are virtual hosts.

113
00:07:21,870 --> 00:07:23,870
There's semi-dedicated and dedicated.

114
00:07:23,870 --> 00:07:29,030
Of the last 3, VPN, semi-dedicated, and dedicated are usually more expensive.

115
00:07:29,030 --> 00:07:32,660
They're usually used for websites that require more resources.

116
00:07:32,660 --> 00:07:34,680
If you're just starting out with a website,

117
00:07:34,680 --> 00:07:40,670
it might just be more economical to go with the shared hosting.

118
00:07:40,670 --> 00:07:43,430
And what shared means is just a bunch of websites are all together

119
00:07:43,430 --> 00:07:51,560
sort of on one server on this website on this host server, and you can access your website

120
00:07:51,560 --> 00:07:53,660
via domain name.

121
00:07:53,660 --> 00:07:55,980
>> There are a lot of popular hosts out there.

122
00:07:55,980 --> 00:08:01,160
HostGator and DreamHost--those are very, very big and very, very popular

123
00:08:01,160 --> 00:08:03,160
and very, very successful.

124
00:08:03,160 --> 00:08:05,160
I personally use one called MDDHosting.

125
00:08:05,160 --> 00:08:08,240
If you go to www.mddhosting.com, that's my host of choice.

126
00:08:08,240 --> 00:08:10,240
I think they're very good. 

127
00:08:10,240 --> 00:08:14,550
They've always been very reliable, and I've never had any problems with them.

128
00:08:14,550 --> 00:08:18,610
They also have very competitive pricing.

129
00:08:18,610 --> 00:08:24,400
Two that I don't really like are GoDaddy--that's also a very popular host,

130
00:08:24,400 --> 00:08:26,400
but I've had terrible experiences with them, 

131
00:08:26,400 --> 00:08:29,430
and a lot of people that I know have had really terrible experiences with them.

132
00:08:29,430 --> 00:08:32,150
They sort of go after people who don't know what they're doing--

133
00:08:32,150 --> 00:08:34,150
maybe you're making a website for the first time, 

134
00:08:34,150 --> 00:08:37,150
and so they sort of con them into buying their hosting package.

135
00:08:37,150 --> 00:08:42,570
Don't do it. Don't fall for it. Go look for other hosting packages that really fit your needs.

136
00:08:42,570 --> 00:08:44,880
And the other one is--there are free hosts out there.

137
00:08:44,880 --> 00:08:47,350
There are websites that will host your website for free--

138
00:08:47,350 --> 00:08:49,350
sometimes by putting an ad on your site, 

139
00:08:49,350 --> 00:08:52,290
sometimes by making you participate in their forums,

140
00:08:52,290 --> 00:08:54,340
but sometimes just also for free.

141
00:08:54,340 --> 00:09:00,000
But, be careful with free hosts because a lot of them really just go out of business 

142
00:09:00,000 --> 00:09:03,480
after a few months. You just can't keep up with the costs.

143
00:09:03,480 --> 00:09:07,460
Others are just very unreliable, and your site will always be down, 

144
00:09:07,460 --> 00:09:09,700
and you don't want that to happen.

145
00:09:09,700 --> 00:09:12,330
>> Each host will offer their own control panel.

146
00:09:12,330 --> 00:09:16,520
Notice that for your appliance, there really isn't a control panel per se.

147
00:09:16,520 --> 00:09:19,230
You have to use terminal to go and edit the files.

148
00:09:19,230 --> 00:09:21,230
You have to chmod things by yourself.

149
00:09:21,230 --> 00:09:24,770
If you wanted to go to PHPMyAdmin, 

150
00:09:24,770 --> 00:09:29,560
you have to go to localhost@/phpmyadmin and things like that.

151
00:09:29,560 --> 00:09:36,660
But with a control panel you can go in and edit the files on your server 

152
00:09:36,660 --> 00:09:40,350
with Windows Explorer or a finder-type application.

153
00:09:40,350 --> 00:09:44,810
Or you can go through and look at your databases with their own tool

154
00:09:44,810 --> 00:09:47,280
instead of PHPmyadmin.

155
00:09:47,280 --> 00:09:52,240
So, there is a lot of choice here, and some of the more popular control panels are up there.

156
00:09:52,240 --> 00:09:54,240
But if you are looking for a host,

157
00:09:54,240 --> 00:09:57,090
then you might want to look at what sorts of customizations and options

158
00:09:57,090 --> 00:10:02,810
they offer me to customize my server and to make my website run better.

159
00:10:02,810 --> 00:10:07,110
So, then you might ask, "Well, how do I choose hosting?"

160
00:10:07,110 --> 00:10:11,460
If you go on to any host website there's a lot of jargon, and there are a lot of options.

161
00:10:11,460 --> 00:10:14,470
There are a lot of different prices also.

162
00:10:14,470 --> 00:10:19,690
Normally I go for the cheaper ones just because websites that maybe you and I make--

163
00:10:19,690 --> 00:10:23,520
and especially right now, especially as starters--they may not need as many resources

164
00:10:23,520 --> 00:10:26,770
as might a website like Microsoft.com.

165
00:10:26,770 --> 00:10:32,090
>> First you want to look at the operating system if you're really curious whether

166
00:10:32,090 --> 00:10:35,090
your site's going to be hosted on Linux, on Windows, or on Mac.

167
00:10:35,090 --> 00:10:39,790
Normally we just go with Linux because that's usually the cheapest,

168
00:10:39,790 --> 00:10:43,730
and also the one that maybe you guys are more familiar with because of the appliance.

169
00:10:43,730 --> 00:10:48,040
And then, maybe they'll put some restrictions on the amount of bandwidth that you get--

170
00:10:48,040 --> 00:10:53,030
like how many megabytes or gigabytes of data can users download 

171
00:10:53,030 --> 00:10:55,470
from your website per month? Or disk space.

172
00:10:55,470 --> 00:11:00,640
How much space do you get? Is it 500 MB? Is it 2 GB? Is it unlimited?

173
00:11:00,640 --> 00:11:05,920
Nowadays, a lot of web servers give you unlimited disk space as a way for them 

174
00:11:05,920 --> 00:11:08,560
to entice you to get their hosting package.

175
00:11:08,560 --> 00:11:11,850
But if you really think about it, when are you ever going to need unlimited disk space?

176
00:11:11,850 --> 00:11:18,060
If you have a couple of HTML files, a couple of PHP, a couple of images--

177
00:11:18,060 --> 00:11:20,060
that's only a couple of megabytes, and so

178
00:11:20,060 --> 00:11:23,110
usually I just go for maybe a few gigabytes' worth of space, 

179
00:11:23,110 --> 00:11:27,990
and that might be enough to start me off until I need more.

180
00:11:27,990 --> 00:11:31,480
>> Finally, they may put restrictions on what sort of--how many databases you can have.

181
00:11:31,480 --> 00:11:34,760
Maybe you can only have 1 database. Maybe you can have 2. Maybe you can have 10.

182
00:11:34,760 --> 00:11:38,330
Is it really important to you how many you get?

183
00:11:38,330 --> 00:11:40,330
Things to ask yourself.

184
00:11:40,330 --> 00:11:42,330
And then finally, just things like languages.

185
00:11:42,330 --> 00:11:44,330
Do they support PHP? Do they support MySQL?

186
00:11:44,330 --> 00:11:49,010
Most hosting websites do support these because they are free. They're open source.

187
00:11:49,010 --> 00:11:51,190
It doesn't cost them anything to provide these for you.

188
00:11:51,190 --> 00:11:55,680
But if you want to use, say, Ruby or Python or some of these other languages--

189
00:11:55,680 --> 00:11:59,490
they may not support it on their server, so it's important to look for those kinds of things.

190
00:11:59,490 --> 00:12:05,620
>> And finally, do they allow you to do some more advanced things like SSL or cron jobs?

191
00:12:05,620 --> 00:12:12,060
SSL is an option where you can make your website more secure by making it HTTPS

192
00:12:12,060 --> 00:12:14,060
and encrypt your connections.

193
00:12:14,060 --> 00:12:17,230
And cron jobs are just maybe scripts that you want to run 

194
00:12:17,230 --> 00:12:19,510
every 5 minutes, every 10 minutes, every 15.

195
00:12:19,510 --> 00:12:22,030
A lot of shared hosting websites do put restrictions 

196
00:12:22,030 --> 00:12:26,310
on the number of cron jobs that you can run because that takes up more resources.

197
00:12:26,310 --> 00:12:31,800
>> And finally, just everything else that you want to look at--make sure exactly what's going on

198
00:12:31,800 --> 00:12:35,180
before you buy your hosting package.

199
00:12:35,180 --> 00:12:37,720
And finally, performance. Performance is huge.

200
00:12:37,720 --> 00:12:39,740
How fast is my website going to run?

201
00:12:39,740 --> 00:12:42,950
Most users aren't going to wait for even seconds for your website to run 

202
00:12:42,950 --> 00:12:47,640
before they just get bored, and they go on to MeanBase and start looking at pictures

203
00:12:47,640 --> 00:12:52,240
of cats--you know that happens, and you want to make sure that you get that user on board

204
00:12:52,240 --> 00:12:54,300
and that you have good uptime which just means that

205
00:12:54,300 --> 00:12:56,300
your website's going to be accessible at all times.

206
00:12:56,300 --> 00:13:01,880
A lot of hosts have really bad uptime and that just means your website's not going to be

207
00:13:01,880 --> 00:13:06,500
accessible, and you don't want that to happen because you might be sad.

208
00:13:06,500 --> 00:13:10,360
And you can also track your host's performance with websites like

209
00:13:10,360 --> 00:13:16,440
Pingdom.com or Host-tracker.com, and they just tell you how often is your site down.

210
00:13:16,440 --> 00:13:18,490
>> And finally, you want to see about their support.

211
00:13:18,490 --> 00:13:21,890
If you have a problem are they going to respond to you within 24 hours?

212
00:13:21,890 --> 00:13:23,890
Are they going to respond to you within 48 hours?

213
00:13:23,890 --> 00:13:26,500
The hosting service that I use normally responds to me within minutes 

214
00:13:26,500 --> 00:13:29,760
which is really nice.

215
00:13:29,760 --> 00:13:33,990
Whew! All right! It's time for a break. But I'm not going to give it to you.

216
00:13:33,990 --> 00:13:38,200
We'll just look at pictures of cute cats every now and then.

217
00:13:38,200 --> 00:13:42,740
>> Another really, really big thing is cross-browser compatibility.

218
00:13:42,740 --> 00:13:45,890
What do I mean by cross-browser compatibility?

219
00:13:45,890 --> 00:13:50,970
You know, nowadays it's not just Microsoft Internet Explorer.

220
00:13:50,970 --> 00:13:53,970
It's not just Mozilla Firefox or Safari.

221
00:13:53,970 --> 00:13:58,190
Now we have Chrome. We have Opera. We have Dolphin. We have Camino. 

222
00:13:58,190 --> 00:14:00,540
We have Conqueror. We have all of these different browsers.

223
00:14:00,540 --> 00:14:05,950
Things that are coming out now--RockMelt--though those are all based on Chromium.

224
00:14:05,950 --> 00:14:10,990
But the fact of the matter is, there isn't just one browser anymore.

225
00:14:10,990 --> 00:14:13,860
You're not just viewing these webpages with one application.

226
00:14:13,860 --> 00:14:17,660
And so, different browsers will respond to different HTML, different CSS, and

227
00:14:17,660 --> 00:14:21,210
different JavaScript differently, and how do you deal with that?

228
00:14:21,210 --> 00:14:24,370
Well, in certain cases, you really can't.

229
00:14:24,370 --> 00:14:29,160
Your website--if it works in one browser, the code that you wrote will not work

230
00:14:29,290 --> 00:14:32,910
in another browser, and it's your job to make sure that the code that you write

231
00:14:32,910 --> 00:14:36,000
is universal, that it works everywhere.

232
00:14:36,000 --> 00:14:38,000
So, this is really dangerous.

233
00:14:38,000 --> 00:14:42,450
If you say, "Well, it's working on my computer. Great! Let's move on."

234
00:14:42,450 --> 00:14:46,040
Well, it's probably not going to work on mine, and when I go to your website

235
00:14:46,040 --> 00:14:49,210
I'm going to be very sad, and I'm going to leave right away.

236
00:14:49,210 --> 00:14:51,570
So, let's see how you can prevent this.

237
00:14:51,570 --> 00:14:55,520
>> The first thing, of course, is to only use standard HTML, CSS, and JavaScript.

238
00:14:55,520 --> 00:14:57,520
What do I mean by that?

239
00:14:57,520 --> 00:15:00,180
Well, there are a lot of not standard things out there.

240
00:15:00,180 --> 00:15:03,490
For example, in CSS there are many versions.

241
00:15:03,490 --> 00:15:10,830
If you see any CSS rules with -moz- or -webkit-, those rules are specific 

242
00:15:10,830 --> 00:15:15,720
to both the Mozilla browsers and the Webkit browsers,

243
00:15:15,720 --> 00:15:20,590
and so you want to make sure that maybe you want to avoid those things

244
00:15:20,590 --> 00:15:25,150
because if you use -moz- that rule is only going to work on Firefox.

245
00:15:25,150 --> 00:15:29,640
And if you really want it to look good on Internet Explorer also,

246
00:15:29,640 --> 00:15:31,640
you're going to be out of luck.

247
00:15:31,640 --> 00:15:37,910
For HTML also, you could do things in HTML that work in one browser

248
00:15:37,910 --> 00:15:41,830
but that breaks in another, and you want to avoid that as much as possible.

249
00:15:41,830 --> 00:15:44,830
And finally for JavaScript even--there are many versions of JavaScript, 

250
00:15:44,830 --> 00:15:50,570
and this summer we ran into a problem where Document.getElementsByClassName--

251
00:15:50,570 --> 00:15:54,500
which is usually a function that's defined as a part of the JavaScript standard--

252
00:15:54,500 --> 00:15:58,120
was not to find in Internet Explorer 8.

253
00:15:58,120 --> 00:16:01,900
So, over the summer I was working in a lab and we were building online experiments.

254
00:16:01,900 --> 00:16:06,210
And we thought it was working really well until we realized users that were using

255
00:16:06,210 --> 00:16:09,780
Internet Explorer 8 could not submit their results.

256
00:16:09,780 --> 00:16:13,200
We were missing out on a lot of data. That made us really sad. 

257
00:16:13,200 --> 00:16:17,790
So, you always want to make sure that your scripts are going to work everywhere.

258
00:16:17,790 --> 00:16:20,500
>> And finally, use validator.w3.org

259
00:16:20,500 --> 00:16:22,770
which is what we tell you to do in pset 7.

260
00:16:22,770 --> 00:16:24,530
Make sure that your pages are validated. 

261
00:16:24,530 --> 00:16:28,310
That's important because that at least is a first step sanity check.

262
00:16:28,310 --> 00:16:31,870
Is my code actually standards compliant?

263
00:16:34,930 --> 00:16:39,320
Another way to sort of help you make sure that your site is going to work

264
00:16:39,320 --> 00:16:42,610
under most circumstances is to maybe use some libraries and frameworks

265
00:16:42,610 --> 00:16:46,210
because these really smart developers have thought about these issues for you.

266
00:16:46,210 --> 00:16:49,850
They've gone through and they've written different functions that work across browsers.

267
00:16:49,850 --> 00:16:53,560
For example, we use jQuery in Pset 7.

268
00:16:53,560 --> 00:16:58,030
Even though you may not have seen it, jQuery provides a lot of functions

269
00:16:58,030 --> 00:17:00,280
that otherwise you would have to write yourself.

270
00:17:00,280 --> 00:17:05,310
But these developers wrote it, and they made sure that it works across all browsers.

271
00:17:05,310 --> 00:17:10,280
And Bootstrap--which is another CSS framework that we showed you in Pset 7--

272
00:17:10,280 --> 00:17:17,000
it really takes away a lot of the headaches with designing websites that look good.

273
00:17:17,000 --> 00:17:19,000
in all browsers.

274
00:17:19,000 --> 00:17:23,660
>> And finally, if you can avoid it, I usually avoid coding from scratch.

275
00:17:23,660 --> 00:17:28,079
If you're just creating a website for your school club, for example,

276
00:17:28,079 --> 00:17:33,920
and all you need to do is to display a few pages and maybe have your president go in

277
00:17:33,920 --> 00:17:38,910
and change a few things here and there--there's really no need to code that up yourself.

278
00:17:38,910 --> 00:17:40,910
That takes a lot of your time. 

279
00:17:40,910 --> 00:17:42,660
It takes a lot of your energy, and you have to go through and you have to find out, 

280
00:17:42,660 --> 00:17:45,930
well, is this going to look good in this browser, is it going to look good in this browser.

281
00:17:45,930 --> 00:17:50,610
Maybe use some of these patches that others have already written for you, like

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

283
00:17:52,610 --> 00:17:59,400
These are called content--these are called CMSs which basically are just packages that

284
00:17:59,400 --> 00:18:03,020
already come done for you, and you can download them, put them onto your server,

285
00:18:03,020 --> 00:18:07,510
and customize them however you want, and you already have a running website.

286
00:18:07,510 --> 00:18:11,680
Those code packages are something to look in to.

287
00:18:11,680 --> 00:18:15,400
These things are open source unless you go for something like--

288
00:18:15,400 --> 00:18:19,390
if you're looking for a form package, there are things that are not free like

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

290
00:18:21,570 --> 00:18:23,790
If you don't need some of those advanced features,

291
00:18:23,790 --> 00:18:27,530
you can always opt for the free option.

292
00:18:27,530 --> 00:18:31,300
>> And finally, there is no avoiding it.

293
00:18:31,300 --> 00:18:33,300
You must test, test, test. 

294
00:18:33,300 --> 00:18:37,690
You must test your code on all of these browsers and on all of these platforms.

295
00:18:37,690 --> 00:18:44,110
And you know, IE6--thank goodness people have started moving away from IE6

296
00:18:44,110 --> 00:18:49,190
because back in the day, maybe a few years ago, web developers had to always, always,

297
00:18:49,190 --> 00:18:55,280
always pander to IE6's weaknesses in following the standards.

298
00:18:55,280 --> 00:19:00,860
Websites just looked kind of 1990's for lack of a better way to deal with it.

299
00:19:00,860 --> 00:19:04,380
You can also use browser screenshots to check your CSS.

300
00:19:04,380 --> 00:19:08,100
One really cool website is browserlab.adobe.com.

301
00:19:08,100 --> 00:19:11,070
This is a complimentary service put out by Adobe.

302
00:19:11,070 --> 00:19:15,160
And what they do is they can take screenshots of your website

303
00:19:15,160 --> 00:19:18,890
running under different conditions--like running under different browsers,

304
00:19:18,890 --> 00:19:22,660
running under different platforms--and show you what they look like.

305
00:19:22,660 --> 00:19:33,260
Just to show you what I mean here, I created a website last year called Life At Harvard,

306
00:19:33,260 --> 00:19:39,150
and what I tried to do--I tried to make my.harvard better.

307
00:19:39,150 --> 00:19:43,840
Because if you were here last year, my.harvard did not look as it looks now.

308
00:19:43,840 --> 00:19:46,640
It looks kind of disgusting.

309
00:19:46,640 --> 00:19:50,470
But now it looks a lot better.

310
00:19:50,470 --> 00:19:57,070
My implementation wasn't that useful anymore, but all the same,

311
00:19:57,070 --> 00:20:01,310
you know, I tried to add--(unintelligible) many whatever--

312
00:20:01,310 --> 00:20:04,680
and it looks--it looks very good on my computer.

313
00:20:04,680 --> 00:20:08,560
And then, maybe if I'd had more time I would have gone on to browser lab,

314
00:20:08,560 --> 00:20:13,020
and I would have looked at, well, how does it look in Chrome 18 on Windows.

315
00:20:13,020 --> 00:20:17,060
I would scroll down and I would see--oh no! Look at the announcements box.

316
00:20:17,060 --> 00:20:20,200
My text was overflowing. So, that's bad, right?

317
00:20:20,200 --> 00:20:23,700
If a user is using Chrome on Windows and comes to my website,

318
00:20:23,700 --> 00:20:26,730
that immediately looks very unprofessional.

319
00:20:26,730 --> 00:20:30,760
So, I should go into my CSS and find out what part of my CSS is breaking here.

320
00:20:30,760 --> 00:20:35,090
Why isn't it displaying correctly and fix it so that all users can see the same website

321
00:20:35,090 --> 00:20:37,770
and be just as happy.

322
00:20:37,770 --> 00:20:44,280
>> And finally, well, browser screenshots are nice for testing your CSS,

323
00:20:44,280 --> 00:20:46,020
but what about your JavaScript?

324
00:20:46,020 --> 00:20:48,660
What about if you have some complicated script that's running?

325
00:20:48,660 --> 00:20:50,460
Well, you can always do virtualization.

326
00:20:50,460 --> 00:20:56,360
If you have a Mac you can use Bootcamp or VMWare to virtualize maybe a copy of

327
00:20:56,360 --> 00:20:59,540
Windows and use Internet Explorer there.

328
00:20:59,540 --> 00:21:03,400
Or, you can go on to something like Spoon.net, which unfortunately only works on PCs.

329
00:21:03,400 --> 00:21:05,290
But what they do is very cool.

330
00:21:05,290 --> 00:21:10,080
They virtualize software for you so you can run different versions of IE, for example.

331
00:21:10,080 --> 00:21:12,080
You can run different versions of Firefox. 

332
00:21:12,080 --> 00:21:15,720
You can run different versions of Safari and test out all of your websites there.

333
00:21:15,720 --> 00:21:18,360
Unfortunately, they are not free.

334
00:21:18,360 --> 00:21:20,860
That is a paid service, so there's always sort of this--

335
00:21:20,860 --> 00:21:26,070
there's always sort of this trade off between, well, am I going to make my website look good.

336
00:21:26,070 --> 00:21:31,970
If so, I might have to pay for some services to help me do that.

337
00:21:31,970 --> 00:21:35,890
Any questions at this point about anything that we talked about?

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

339
00:21:41,210 --> 00:21:43,870
>> Now we have more things to talk about.

340
00:21:43,870 --> 00:21:45,820
How about errors?

341
00:21:45,820 --> 00:21:48,670
How do you make sure that your website is going to operate even when 

342
00:21:48,670 --> 00:21:50,150
something bad happens?

343
00:21:50,150 --> 00:21:53,940
Maybe you don't have a page named food.php.

344
00:21:53,940 --> 00:21:57,000
But me, I go to your website and I try to access food.php.

345
00:21:57,000 --> 00:22:00,770
Are you just going to show me that white page that says 404--File not found?

346
00:22:00,770 --> 00:22:04,400
Or are you going to say, "Well, I'm sorry that I couldn't find this for you,

347
00:22:04,400 --> 00:22:08,520
but maybe here are some other resources to help you search for what you need."

348
00:22:08,520 --> 00:22:13,180
Other errors--so, this is called HTTP errors which are just some error codes

349
00:22:13,180 --> 00:22:17,130
that your server might have sent back to the browser in case of something bad happening.

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

351
00:22:20,160 --> 00:22:25,560
403 is kind of common when you have a directory that's not supposed to be accessed 

352
00:22:25,560 --> 00:22:27,310
by the user, but the user tries to anyway.

353
00:22:27,310 --> 00:22:30,840
And 500--Internal Server Error--that usually happens when you have something

354
00:22:30,840 --> 00:22:33,070
really bad going on with your PHP code.

355
00:22:33,070 --> 00:22:36,140
But in any case, these sorts of browsers--these sorts of errors do happen.

356
00:22:36,140 --> 00:22:40,550
>> So, how do you make sure that you gracefully handle these errors

357
00:22:40,550 --> 00:22:43,230
and make sure that the user is not just sort of hanging there?

358
00:22:46,850 --> 00:22:48,850
Here comes .htaccess.

359
00:22:48,850 --> 00:22:51,300
Now, .htaccess is something that works on Apache servers,

360
00:22:51,300 --> 00:22:55,550
something that works and works on a few other servers as well.

361
00:22:55,550 --> 00:23:01,350
This is just a way for you to configure your server such that

362
00:23:01,350 --> 00:23:04,470
you can make it do whatever you want it to do.

363
00:23:04,470 --> 00:23:06,790
Some things you could do. You could control your cache settings.

364
00:23:06,790 --> 00:23:11,290
Maybe there's a certain page on your website that you make sure that the user

365
00:23:11,290 --> 00:23:14,740
re-download every time the user comes and visits your website.

366
00:23:14,740 --> 00:23:26,980
Or maybe you have some URL that's like yoursite.com/test/html/pages/hello.html

367
00:23:26,980 --> 00:23:31,270
and you just want that to be yourname.com/hello--well, you can use .htaccess

368
00:23:31,270 --> 00:23:34,760
to redirect one webpage to another.

369
00:23:34,760 --> 00:23:36,600
You can also use it to do authentication.

370
00:23:36,600 --> 00:23:39,890
Maybe there are some portions of your website that you need to use another password.

371
00:23:39,890 --> 00:23:42,620
You can block certain IP addresses, block certain domains.

372
00:23:42,620 --> 00:23:46,770
Maybe you just really don't like Harvard students using your website.

373
00:23:46,770 --> 00:23:49,910
Well, you have the option of blocking all Harvard IP addresses.

374
00:23:49,910 --> 00:23:56,370
>> Finally, you can treat things--you can write certain code to make your server 

375
00:23:56,370 --> 00:24:03,100
treat like .zhao or .your name or .hello pages as PHP code.

376
00:24:03,100 --> 00:24:05,170
Maybe that'll be useful. Maybe that won't be.

377
00:24:05,170 --> 00:24:07,980
And finally, you can use it to handle error responses.

378
00:24:07,980 --> 00:24:10,300
What do I mean by that?

379
00:24:10,300 --> 00:24:16,030
If you simply add code like this--ErrorDocument 404 and then direct them to some

380
00:24:16,030 --> 00:24:20,440
error page, you can make sure that the user doesn't just see the really, really ugly

381
00:24:20,440 --> 00:24:23,550
404 and show them something nice.

382
00:24:23,550 --> 00:24:29,000
>> Let's actually take a look at how we can do that with your Pset 7.

383
00:24:29,000 --> 00:24:34,190
Here, I'm in my appliance.

384
00:24:34,190 --> 00:24:38,440
I'm going to open Chrome, and then I'm going to try to access a page

385
00:24:38,440 --> 00:24:43,350
that doesn't exist on CS50 Finance.

386
00:24:43,350 --> 00:24:52,710
So, local host--cats.php--so, notice that I created an error document

387
00:24:52,710 --> 00:24:54,770
that says, "Canz not find z page!!"

388
00:24:54,770 --> 00:24:56,990
It has a very sad cat on it.

389
00:24:56,990 --> 00:24:59,910
If you go on Twitter, if you go on any of these other sites,

390
00:24:59,910 --> 00:25:02,700
you can't find a page, they usually try to show you a cute picture

391
00:25:02,700 --> 00:25:04,850
so that you're not too disappointed.

392
00:25:04,850 --> 00:25:07,830
You could also have something that's more professional that says,

393
00:25:07,830 --> 00:25:11,760
well, I'm sorry I couldn't find the page, but maybe here's a search box.

394
00:25:11,760 --> 00:25:16,750
Or maybe here are some links that will help you find the link that you want.

395
00:25:16,750 --> 00:25:21,410
So, how did I do this? How is this even possible?

396
00:25:21,410 --> 00:25:23,500
If we go into our terminal here--

397
00:25:23,500 --> 00:25:26,300
I'm just going to zoom in a bit--

398
00:25:26,300 --> 00:25:30,110
notice that I have a new page.

399
00:25:30,110 --> 00:25:34,440
Inside my HTML directory it's called--you can't see it--

400
00:25:34,440 --> 00:25:37,280
it's called error.php.

401
00:25:37,280 --> 00:25:41,010
And error.php is just a file that I made

402
00:25:41,010 --> 00:25:43,030
that shows you that page itself.

403
00:25:43,030 --> 00:25:46,710
I can show you what error.php is.

404
00:25:46,710 --> 00:25:48,710
It's exactly this page.

405
00:25:48,710 --> 00:25:50,710
It says, "Oh no! Canz not find z page!!"

406
00:25:50,710 --> 00:25:58,630
And, if you want to see--so, notice that .htaccess sort of is a weird name.

407
00:25:58,630 --> 00:26:01,040
It starts with a dot which means that it's a system file.

408
00:26:01,040 --> 00:26:03,360
It's a hidden file which is not normally shown.

409
00:26:03,360 --> 00:26:09,060
If you do ls-a, you can see all of the hidden files in a certain directory,

410
00:26:09,060 --> 00:26:12,030
and indeed, you see .htaccess is one of them.

411
00:26:12,030 --> 00:26:15,490
Let's go ahead and open .htaccess--

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

413
00:26:19,830 --> 00:26:26,870
Boom! All I have is one line in there--Error document for 404 errors

414
00:26:26,870 --> 00:26:28,760
which are also known as file-not-found errors.

415
00:26:28,760 --> 00:26:32,720
Let's redirect them to something called error.php.

416
00:26:36,100 --> 00:26:42,030
You can have fun things like canz not find z page!!

417
00:26:42,030 --> 00:26:46,770
And there are also very cool things that you can do with .htaccess.

418
00:26:46,770 --> 00:26:49,520
If you want to see more .htaccess magic,

419
00:26:49,520 --> 00:26:56,470
this is a very cool website to go to--it's called javascriptkit.com/howto/htaccess.shtml--

420
00:26:56,470 --> 00:27:01,880
if you want to perform more server magic. And it could be very fun.

421
00:27:01,880 --> 00:27:05,490
>> Whew! All right! More cute pictures.

422
00:27:05,490 --> 00:27:10,060
This is a guy doing push-ups, and his cat is trying to help. I think it's very cute.

423
00:27:10,060 --> 00:27:14,830
Unfortunately, I don't have a cat like that.

424
00:27:14,830 --> 00:27:17,640
All right. So, we've talked about .htaccess.

425
00:27:17,640 --> 00:27:19,640
We've talked about error handling.

426
00:27:19,640 --> 00:27:20,940
We've talked about hosting, domain names.

427
00:27:20,940 --> 00:27:23,230
We've talked about cross-browser compatibility.

428
00:27:23,230 --> 00:27:25,210
Now how do we make sure that your website actually performs?

429
00:27:25,210 --> 00:27:26,950
How do we make sure that if I go to your website 

430
00:27:26,950 --> 00:27:29,830
I can see your page within a few seconds?

431
00:27:29,830 --> 00:27:33,520
One of the things that I think people just sort of forget about

432
00:27:33,520 --> 00:27:36,160
is image optimization.

433
00:27:36,160 --> 00:27:37,560
Let's say that you wanted to put a picture on your site

434
00:27:37,560 --> 00:27:40,330
and it's 2 MG large.

435
00:27:40,330 --> 00:27:42,670
That might be fine for us because we're at Harvard,

436
00:27:42,670 --> 00:27:45,000
and we have a very fast Internet connection.

437
00:27:45,000 --> 00:27:47,470
But imagine someone in China. Imagine someone in India.

438
00:27:47,470 --> 00:27:52,440
imagine someone maybe in rural Kansas who maybe doesn't have the same sort of

439
00:27:52,440 --> 00:27:54,690
broadband Internet that we have.

440
00:27:54,690 --> 00:27:57,710
If you have a 2 MB image on your site and the user is trying to access it,

441
00:27:57,710 --> 00:28:00,890
it's going to take them a really long time to download.

442
00:28:00,890 --> 00:28:04,160
So, if you don't need that sort of resolution,

443
00:28:04,160 --> 00:28:09,220
then you can resize your image with something like Adobe Photo Shop.

444
00:28:09,220 --> 00:28:13,400
There's usually an option called safe for web and devices,

445
00:28:13,400 --> 00:28:15,850
and what it does is it strips out all of the unnecessary information

446
00:28:15,850 --> 00:28:20,160
and sort of compacts your file into a small image size so that you can

447
00:28:20,160 --> 00:28:22,960
put it onto your website, and any user who tries to download that page

448
00:28:22,960 --> 00:28:26,950
is going to download a smaller version of your image.

449
00:28:26,950 --> 00:28:28,230
If you don't have Adobe Photo Shop

450
00:28:28,230 --> 00:28:32,650
webresizer.com is also another resource where you can input your image

451
00:28:32,650 --> 00:28:36,470
and it will spit out the exact same image,

452
00:28:36,470 --> 00:28:39,970
but it will be something like 3 times smaller.

453
00:28:39,970 --> 00:28:41,970
So that's very useful for your users.

454
00:28:41,970 --> 00:28:45,930
>> Another thing that you can do is minify code.

455
00:28:45,930 --> 00:28:48,460
If we take a look at Google.com,

456
00:28:48,460 --> 00:28:56,400
you'll see that it's not sort of the same HTML and CSS that we're used to.

457
00:28:56,400 --> 00:29:02,250
Just going to look at the source code here.

458
00:29:02,250 --> 00:29:07,600
If I just scroll down--wow, that looks pretty disgusting.

459
00:29:07,600 --> 00:29:09,650
This would get a zero on style.

460
00:29:09,650 --> 00:29:13,470
If you coded this for your Pset, you will get a zero on your style.

461
00:29:13,470 --> 00:29:16,990
This has no spacing. The names look really cryptic.

462
00:29:16,990 --> 00:29:19,800
It's all really disgusting.

463
00:29:19,800 --> 00:29:24,060
And the script to close in the body--the closing HTML--

464
00:29:24,060 --> 00:29:26,280
they're all together--all smushed together.

465
00:29:26,280 --> 00:29:28,280
Why do they do this?

466
00:29:28,280 --> 00:29:30,650
They minified their code.

467
00:29:30,650 --> 00:29:33,310
Notice that this document is going to be a lot smaller

468
00:29:33,310 --> 00:29:36,660
for me to download than something with white space,

469
00:29:36,660 --> 00:29:39,410
than something with really long variable names.

470
00:29:39,410 --> 00:29:41,710
If you minify your code you strip out all the white space.

471
00:29:41,710 --> 00:29:45,960
Of course, your browser doesn't care if you have any white space in your code.

472
00:29:45,960 --> 00:29:49,630
You strip it out, now I can download a smaller file--

473
00:29:49,630 --> 00:29:52,770
now the file--the document that we're going to download has a smaller file size,

474
00:29:52,770 --> 00:29:56,180
it will be faster for me to download, and that's useful.

475
00:29:56,180 --> 00:30:01,550
If you're working with websites and you're launching a website,

476
00:30:01,550 --> 00:30:04,630
it's almost always good to minify your code.

477
00:30:04,630 --> 00:30:08,150
Another reason why it might be good is maybe you don't want others to use your code.

478
00:30:08,150 --> 00:30:11,050
Maybe you don't want others to use your CSS.

479
00:30:11,050 --> 00:30:13,460
You know if you really wanted to be stingy with that,

480
00:30:13,460 --> 00:30:16,670
then you can also minify your code, and it would be harder for me to steal it

481
00:30:16,670 --> 00:30:19,170
because I have no idea what's going on.

482
00:30:19,170 --> 00:30:22,990
You can also go to websites like minify.avivo.si.

483
00:30:22,990 --> 00:30:27,900
Services like this online help you minify your code so that you don't have to do it by hand.

484
00:30:27,900 --> 00:30:30,080
Definitely do not do it by hand.

485
00:30:30,080 --> 00:30:32,210
>> Okay. Now speaking about scripts.

486
00:30:32,210 --> 00:30:35,040
Maybe in your PHP code there's something that you don't need to do.

487
00:30:35,040 --> 00:30:37,910
Maybe there's extra loops in there.

488
00:30:37,910 --> 00:30:40,850
We talked about code design in CS50.

489
00:30:40,850 --> 00:30:44,550
Even if you're coding in C if you have--if you're doing extra work

490
00:30:44,550 --> 00:30:49,440
that you don't need to do, well, that's going to slow down your scripts on your website,

491
00:30:49,440 --> 00:30:53,280
and this is especially important for websites because users nowadays are very impatient.

492
00:30:53,280 --> 00:30:56,110
If you're doing unnecessary work, it's going to take them longer 

493
00:30:56,110 --> 00:31:00,080
to get to the information that they want, and they're going to be very unhappy.

494
00:31:00,080 --> 00:31:02,200
Finally, you may want to optimize your database tables.

495
00:31:02,200 --> 00:31:05,020
Remember we talked about indexes.

496
00:31:05,020 --> 00:31:09,420
They're not only good for making sure that you have a row that's unique.

497
00:31:09,420 --> 00:31:12,440
They're also good for making sure that your database works fast.

498
00:31:12,440 --> 00:31:16,240
If you want to read up on that go to the MySQL documentation,

499
00:31:16,240 --> 00:31:18,710
or you can look at--well, how do I optimize my database table?

500
00:31:18,710 --> 00:31:23,350
How do I make sure that I have indices that help me get to the information faster?

501
00:31:23,350 --> 00:31:27,300
>> There are also little tricks that you can use like caching.

502
00:31:27,300 --> 00:31:28,980
If you have PHP--if you have a blog, for example,

503
00:31:28,980 --> 00:31:31,980
and you have--and it's powered by PHP or by any other language--

504
00:31:31,980 --> 00:31:37,690
you can cache your blog at let's say 50-minute intervals so that you can serve static pages

505
00:31:37,690 --> 00:31:40,610
or static HTML to the visitors to your site.

506
00:31:40,610 --> 00:31:43,380
That way the users don't have to run your PHP script every time,

507
00:31:43,380 --> 00:31:47,410
and maybe that will be faster for them to access that information.

508
00:31:47,410 --> 00:31:49,410
>> And finally, you can use something like CDN.

509
00:31:49,410 --> 00:31:51,900
Notice that whenever you download a Pset, 

510
00:31:51,900 --> 00:31:54,890
you always go to CDN.CS50.net. Why is that?

511
00:31:54,890 --> 00:32:01,540
CS50 also uses sort of like a CDN--a content distribution network--

512
00:32:01,540 --> 00:32:06,120
which just means that it's a bunch of servers maybe somewhere around the globe

513
00:32:06,120 --> 00:32:08,120
that help serve your pages to your visitors.

514
00:32:08,120 --> 00:32:13,770
If your visitor is getting a page from a server that's closer to them geographically,

515
00:32:13,770 --> 00:32:16,770
then most likely your visitor is going to get that file a lot faster.

516
00:32:16,770 --> 00:32:20,490
There are also sources online that help you do that.

517
00:32:20,490 --> 00:32:24,070
One of them is CloudFlare. They offer a free CDN service.

518
00:32:24,070 --> 00:32:26,020
If you have large files that your serving to your users,

519
00:32:26,020 --> 00:32:32,260
then perhaps it's better to put them on a CDN so that they can get to them faster.

520
00:32:32,260 --> 00:32:39,070
>> The final topic for the day is search engine optimization.

521
00:32:39,070 --> 00:32:41,070
What is search engine optimization?

522
00:32:41,070 --> 00:32:44,070
That's making sure that search engines like Google or Bing or Yahoo 

523
00:32:44,070 --> 00:32:50,740
can go on to your site and crawl your site and index your site and when

524
00:32:50,740 --> 00:32:53,040
I, for example, go on to Google.com and I try to search for something,

525
00:32:53,040 --> 00:32:55,040
then your site will pop up.

526
00:32:55,040 --> 00:32:57,000
How do you make sure that your site is one of the top 10?

527
00:32:57,000 --> 00:33:00,000
Because as we all know, if you search for something on Google

528
00:33:00,000 --> 00:33:02,880
and it's not on the top 10 you're most likely not going to look in the next 10.

529
00:33:02,880 --> 00:33:07,160
This is sort of a topic that's shrouded in mystery.

530
00:33:07,160 --> 00:33:09,850
There's a lot of hype out there on the Internet.

531
00:33:09,850 --> 00:33:14,680
There are a lot of superstitions about if you do x then Google will like you better.

532
00:33:14,680 --> 00:33:16,680
If you do y then Google will like you better.

533
00:33:16,680 --> 00:33:19,680
It's probably better to look into the search giant's documents itself.

534
00:33:19,680 --> 00:33:27,470
>> This is one of the documents on Google that tell you exactly how to optimize your site

535
00:33:27,470 --> 00:33:30,860
so that Google can access and index it very nicely.

536
00:33:30,860 --> 00:33:33,680
You don't have to copy down this URL because this presentation is going to 

537
00:33:33,680 --> 00:33:36,680
be online anyway.

538
00:33:36,680 --> 00:33:38,770
If you look at this and you read this there are some very helpful hints in there.

539
00:33:38,770 --> 00:33:42,240
The Google tells you--if you really want your site to be indexed well

540
00:33:42,240 --> 00:33:44,610
then you should do all of these things.

541
00:33:44,610 --> 00:33:47,570
>> Another thing that search engines really like is fresh content.

542
00:33:47,570 --> 00:33:49,500
If you have content that's updated very regularly

543
00:33:49,500 --> 00:33:51,950
then search engines say, ooh, I like your site.

544
00:33:51,950 --> 00:33:53,950
I'm going to go to your site very often.

545
00:33:53,950 --> 00:33:56,840
I'm going to index a lot of your pages.

546
00:33:56,840 --> 00:33:59,560
If you have fresh content then you're more likely to show up--

547
00:33:59,560 --> 00:34:02,540
you're more likely to be more relevant.

548
00:34:02,540 --> 00:34:04,630
You're more likely to be more updated, 

549
00:34:04,630 --> 00:34:08,860
and search engines are more likely to put your site above others.

550
00:34:08,860 --> 00:34:10,860
>> Deep links are also important.

551
00:34:10,860 --> 00:34:13,530
If you really wanted your site to look good in a search engine's eyes

552
00:34:13,530 --> 00:34:18,090
have a lot of other websites linked to it and linked deeply into your website.

553
00:34:18,090 --> 00:34:20,090
Don't just link to your homepage.

554
00:34:20,090 --> 00:34:26,719
Link to maybe yourname.com/something/something/something.php.

555
00:34:26,719 --> 00:34:29,840
That--to a search engine--means, wow, they have really interesting content

556
00:34:29,840 --> 00:34:35,350
that someone else is linking so deeply into their site that I should really, really 

557
00:34:35,350 --> 00:34:38,260
put more importance onto that site's pages.

558
00:34:38,260 --> 00:34:41,940
>> If you have accurate page titles, if you have no errors that's good because

559
00:34:41,940 --> 00:34:44,670
if a search engine is trying to visit your site, and it's getting an error,

560
00:34:44,670 --> 00:34:46,780
it's probably going to give up very, very soon.

561
00:34:46,780 --> 00:34:49,510
And finally, you want to have a fast load time because search engines--

562
00:34:49,510 --> 00:34:53,820
just like humans--don't have a lot of patience for slow websites.

563
00:34:53,820 --> 00:34:57,070
This is a way for you to make sure that you show up higher in

564
00:34:57,070 --> 00:35:01,390
search engine queries and hopefully thereby get more traffic.

565
00:35:01,390 --> 00:35:04,730
Because after all, you've spent all this time developing your website.

566
00:35:04,730 --> 00:35:06,280
You spent all this time launching this website online.

567
00:35:06,280 --> 00:35:11,780
You want to make sure that you have plenty of users who actually see your content.

568
00:35:13,330 --> 00:35:15,660
>> Other good resources to use.

569
00:35:15,660 --> 00:35:19,210
Google Webmaster Tools is something to look in to.

570
00:35:19,210 --> 00:35:21,780
This just helps you to see--Google isn't indexing my site.

571
00:35:21,780 --> 00:35:24,490
What sorts of errors is it encountering?

572
00:35:24,490 --> 00:35:27,490
How many pages has it indexed?

573
00:35:27,490 --> 00:35:29,490
What does it think is the most important content on my page?

574
00:35:29,490 --> 00:35:31,490
Maybe that's not what I want it to be.

575
00:35:31,490 --> 00:35:36,880
Maybe I need to change my website a little bit such that it's reflected better

576
00:35:36,880 --> 00:35:38,880
what my website is really about.

577
00:35:38,880 --> 00:35:41,000
Google Analytics is another really cool tool.

578
00:35:41,000 --> 00:35:44,120
You can add a little bit of JavaScript to your pages.

579
00:35:44,120 --> 00:35:47,020
And then afterwards you can go to Google Analytics, and it will track

580
00:35:47,020 --> 00:35:49,020
your visitor demographics and your site growth.

581
00:35:49,020 --> 00:35:51,810
It will tell you exactly how many visitors visit your site

582
00:35:51,810 --> 00:35:55,310
within a certain day, within a certain hour, within a certain week.

583
00:35:55,310 --> 00:35:57,310
How many visitors from China? How many visitors from Antarctica--

584
00:35:57,310 --> 00:35:59,310
you're getting to your website.

585
00:35:59,310 --> 00:36:03,470
that might be something cool to see or it might even be useful

586
00:36:03,470 --> 00:36:05,470
because you're trying to target a certain group.

587
00:36:05,470 --> 00:36:08,410
Maybe you're trying to target teenagers with your website, and you see that

588
00:36:08,410 --> 00:36:11,410
most of the visitors to your website are maybe 30- to 40-year olds,

589
00:36:11,410 --> 00:36:15,130
then maybe either you have a problem or you can just say,

590
00:36:15,130 --> 00:36:19,590
well, then maybe I should just change my website's focus so that 

591
00:36:19,590 --> 00:36:22,240
I focus more on that age group.

592
00:36:22,240 --> 00:36:28,500
>> Google Apps--if you wanted to have sort of emails with your domain name--

593
00:36:28,500 --> 00:36:31,230
maybe something like yourname@yourname.com--

594
00:36:31,230 --> 00:36:35,270
you can use gmail addresses--you can use the gmail service

595
00:36:35,270 --> 00:36:38,500
and Google Apps is one way to do that.

596
00:36:38,500 --> 00:36:44,050
You can set up specific email addresses that are specific to your domain name

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

598
00:36:46,800 --> 00:36:51,840
>> And finally, there are web developer extensions and add-ons--for Chrome,

599
00:36:51,840 --> 00:36:56,380
for Firefox, for other browsers--that allow you to go in and inspect

600
00:36:56,380 --> 00:37:02,290
CSS, inspect JavaScript, see exactly what's wrong with your JavaScript script,

601
00:37:02,290 --> 00:37:05,290
and maybe that'll be useful for your de-bugging purposes, for you finding out--

602
00:37:05,290 --> 00:37:08,630
well, why isn't my website displaying correctly in this browser?

603
00:37:08,630 --> 00:37:11,800
>> And finally, if you wanted to learn more about all these topics--

604
00:37:11,800 --> 00:37:14,410
if you wanted to learn more about HTML and CSS and JavaScript--

605
00:37:14,410 --> 00:37:16,790
because after all, we only taught you a little bit--

606
00:37:16,790 --> 00:37:21,240
you can go websites like W3Schools.com to look for more resources.

607
00:37:21,240 --> 00:37:26,340
They have very nice tutorials on how do I do x, or what does y mean?

608
00:37:26,340 --> 00:37:30,400
If you wanted to learn more about these languages you can simply go here.

609
00:37:30,400 --> 00:37:37,690
>> All right. I think I wanted to leave the last few minutes of this for questions,

610
00:37:37,690 --> 00:37:39,810
so are there any questions about anything that we talked about?

611
00:37:39,810 --> 00:37:43,500
[audience member] What kinds of things are on W3Schools and how is it covered?

612
00:37:43,500 --> 00:37:45,500
[Yuechen Zhao] What kinds of things?

613
00:37:45,500 --> 00:37:50,180
So, one of the very biggest things that I use a lot is their references.

614
00:37:50,180 --> 00:37:54,430
Their references detail, for example for CSS--

615
00:37:54,430 --> 00:37:59,480
what this means or if you wanted to change the background of a page--

616
00:37:59,480 --> 00:38:01,480
how do you do it?

617
00:38:01,480 --> 00:38:04,550
Which browsers support that command? Things like that.

618
00:38:04,550 --> 00:38:10,870
And then they also just have very nice tutorials on HTML, on PHP, on JavaScript,

619
00:38:10,870 --> 00:38:14,290
on MySQL, on all sorts of different topics.

620
00:38:14,290 --> 00:38:18,800
They have nice tutorials. They teach you how to do things.

621
00:38:18,800 --> 00:38:22,590
It's nice to be able to go and learn more about these topics.

622
00:38:22,590 --> 00:38:27,180
>> [audience member] HTML 5 is still not compatible with all the browsers out there.

623
00:38:27,180 --> 00:38:30,700
Would you recommend just staying away from it because of compatibility issues?

624
00:38:30,700 --> 00:38:32,700
How would you deal with that?

625
00:38:32,700 --> 00:38:38,640
[Yuechen Zhao] Yes, so, the question is HTML5 is still a baby standard.

626
00:38:38,640 --> 00:38:42,030
It's not really supported by a lot of browsers, so should we avoid it?

627
00:38:42,030 --> 00:38:48,040
I think last year I would have been a very big proponent of, let's avoid HTML5

628
00:38:48,040 --> 00:38:52,430
because it is still--it's still very much new and in fact, the HTML5 standard

629
00:38:52,430 --> 00:38:55,610
has not been finalized yet.

630
00:38:55,610 --> 00:38:58,790
And so, there really is no HTML5 standard.

631
00:38:58,790 --> 00:39:03,840
But I think especially if you're designing a website now,

632
00:39:03,840 --> 00:39:07,450
it might be better if you just go with HTML5 because that's sort of going to be the future,

633
00:39:07,450 --> 00:39:11,250
and if you want your website to be future-proof and you want your website to work 

634
00:39:11,250 --> 00:39:14,320
in future browsers, it might be better to start building something for the future

635
00:39:14,320 --> 00:39:19,830
than for the past, and also just because of the fact that HTML5 really isn't that different

636
00:39:19,830 --> 00:39:23,080
from HTML4 or XHTML.

637
00:39:23,080 --> 00:39:29,780
If you are using HTML5, it normally will work in most browsers.

638
00:39:29,780 --> 00:39:34,660
You just have to sort of go in and make sure with these screenshots

639
00:39:34,660 --> 00:39:38,630
and making sure with going on to these websites yourself.

640
00:39:38,630 --> 00:39:44,280
But most likely it will work unless you're using very specific features to HTML5.

641
00:39:44,280 --> 00:39:50,240
Notice too that for CS50--for example, for the video player that we use--

642
00:39:50,240 --> 00:39:56,230
it uses HTML5 and HTML5 video to display the lectures.

643
00:39:56,230 --> 00:39:59,420
But if you have a really old browser, then it'll fall back on Flash.

644
00:39:59,420 --> 00:40:01,420
So, that's also something else--

645
00:40:01,420 --> 00:40:05,190
have a fall-back system for when you just know that the browser isn't going to handle

646
00:40:05,190 --> 00:40:08,140
what you want it to handle.

647
00:40:08,140 --> 00:40:10,140
>> Other questions?

648
00:40:10,140 --> 00:40:13,270
Anything that we talked about.

649
00:40:16,910 --> 00:40:20,750
All right. Then I think that's about it for me.

650
00:40:20,750 --> 00:40:23,090
I think that's it.

651
00:40:23,090 --> 00:40:28,430
(applause)

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

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