[Seminar] [Preparing Your Site for the Web]
[Yuechen Zhao] [Harvard University]
[This is CS50.] [CS50.TV]
>> Okay. Here's another hour of web development if you guys are up for it.
Today I'm going to be talking about preparing your site for the Web.
All day--and probably for the past 2 weeks--
we've been talking about how to create a website,
how to use HTML, how to use PHP, how to use frameworks,
how to make sure that you can interact with the database--things like that.
But today, we're going to be talking about where your site's going to live after CS50.
Because after all, CS50 does not happen past December.
We're going to be talking about domain names, hosting.
We're going to be talking about what cross-browser compatibility
and cross-platform compatibility are, and how you can make sure that your site
is going to operate under all conditions.
We'll talk about error handling and other server magic.
We're talking about performance optimization, search engine optimization,
and how to get people to actually visit your websites.
And finally, just some good resources to make sure that you guys have enough of those
to go off with your final project, and hopefully after.
>> The first thing that we're going to talk about is domain names.
Right now you're programming in your appliance, you're going to a local host
which isn't actually a domain name.
That's sort of just a nickname or an alias for your actual Linux installation
inside of either VMware on a Mac or VMware Player on a PC.
Domain names allow you to put a site onto the Web and then go to something like
www.google.com and get the website.
How do they work?
Let's say that you're just an average web server--
average Web surfer and you have a laptop, and you go to www.howstuffworks.com.
You can probably see where I stole this from.
How stuff works--your computer will then ask a local DNS server,
"Do you know where this website is?"
"Do you know the IP address of www.howstuffworks.com?"
Your DNS server might say, "Yes, I do."
In that case, you get the IP address, and your computer accesses that IP address.
If it does not, it asks another DNS server, "Hey! Do you know what www.howstuffworks.com is?"
That server might say, "Yes, I do."
So, it tells the other one what it is, and finally, that information gets passed to your computer,
and you can access howstuffworks.com.
>> How can you get one of these magical things?
How can you get maybe www.yourname.com or www.ilovecats.com?
You can register for one,
and there are a lot of websites out there that allow you to do so.
You must--in most circumstances you must pay for them.
There are certain domain names that are free.
If you go to www.co.cc or .tkdomainnames, those are free.
But, they do come with certain restrictions, and in fact some of them might not even be
real, top-level domain names like .com or .net.
Normally I would suggest going for one of them
because users are just more comfortable with those.
You've seen a lot of .coms. You've seen a lot of .nets.
You probably haven't seen a lot of .co.cc's, so they're harder to remember.
Different websites like Godaddy or NameCheap or--I used one that's
kind of sketchy--called activedomain.com.
It looks really sketchy, but it's worked really well for me.
>> And finally, you have others that maybe do more advertising like Network Solutions.
But if you go onto NetworkSolutions.com and look at their pricing
it is really expensive. I was looking at them last night.
For one year of a domain name, it's probably not worth that much money.
In fact, if you're getting a .com or a .org or a .net
the usual price is about $10 a year.
So if you're paying a lot more than that, it's probably not that worth it
because, after all, these websites don't do anything with that domain name.
They just give it to you, and so if you can get it for cheap, why not?
>> The other thing is once you have your domain name, then you probably want to
go on to either Godaddy.com or wherever you bought your domain name
and set the name servers for that domain name.
What that means is once a user goes to www.howstuffworks.com,
those name server IP addresses are the IP addresses that they would be able to look up.
They would be able to access your website through those name servers.
If you apply for hosting somewhere
then your host will most likely give you the name servers to use.
>> And finally, there's this thing called a WHOIS.
A WHOIS database is a database with which you could input a domain name
and it will spit out some information about the owner of that site and other contact information.
Now, you may say, "I don't really want my home address or I don't really want my email address
on the website for anyone to see or on the Internet for everyone to see."
Then you might want to use something that a lot of hosting services provide--
like a WHOIS manager.
A WHOIS manager is simply another service that a lot of them provide that
hides away that information and just puts in who is manager for the name--
for the address it's usually just that company name that's given you this domain name--
and so then your personal information isn't being leaked on the Internet,
which is usually pretty good.
I myself use one of these services.
If you don't care about your own privacy then it doesn't really matter.
>> A DNS server stands for Domain Name System, and what it is--
it's sort of like a hash table somewhere that says,
"This website address is going to map to this IP address." And that's all it is.
So once you query this DNS server, then you can get the IP addresses
for that corresponding domain name and then visit that website.
(audience member asking a question--inaudible)
The first? The first level actually is usually just your computer cache itself.
Your computer sort of remembers the last time that you went to www.google.com
it was at this IP address, and then after awhile, that cache will expire,
and it will ask like the Comcast DNS,
"Hey, what's www.google.com?"
Normally, when you buy a domain name and you register one, and you set up a website,
you can't go to that website immediately with that domain name because the name servers
across the globe don't know about your domain name yet. It has to populate.
It usually takes about 24-48 hours.
All right. So, that's a little bit about domain names. They're very cool.
I think you should get one if you're serious about the project
and if you really want to make your project known across campus,
having a domain name makes it look really professional.
>> Then the next step, of course, is to have some sort of hosting.
If you just host it on your computer, nobody's ever going to be able to go to it.
You could potentially set up a server on your computer and keep your computer on forever,
but that's not recommended.
There are different kinds of hosting online available.
There's shared hosting. There's VPN (unintelligible) which are virtual hosts.
There's semi-dedicated and dedicated.
Of the last 3, VPN, semi-dedicated, and dedicated are usually more expensive.
They're usually used for websites that require more resources.
If you're just starting out with a website,
it might just be more economical to go with the shared hosting.
And what shared means is just a bunch of websites are all together
sort of on one server on this website on this host server, and you can access your website
via domain name.
>> There are a lot of popular hosts out there.
HostGator and DreamHost--those are very, very big and very, very popular
and very, very successful.
I personally use one called MDDHosting.
If you go to www.mddhosting.com, that's my host of choice.
I think they're very good.
They've always been very reliable, and I've never had any problems with them.
They also have very competitive pricing.
Two that I don't really like are GoDaddy--that's also a very popular host,
but I've had terrible experiences with them,
and a lot of people that I know have had really terrible experiences with them.
They sort of go after people who don't know what they're doing--
maybe you're making a website for the first time,
and so they sort of con them into buying their hosting package.
Don't do it. Don't fall for it. Go look for other hosting packages that really fit your needs.
And the other one is--there are free hosts out there.
There are websites that will host your website for free--
sometimes by putting an ad on your site,
sometimes by making you participate in their forums,
but sometimes just also for free.
But, be careful with free hosts because a lot of them really just go out of business
after a few months. You just can't keep up with the costs.
Others are just very unreliable, and your site will always be down,
and you don't want that to happen.
>> Each host will offer their own control panel.
Notice that for your appliance, there really isn't a control panel per se.
You have to use terminal to go and edit the files.
You have to chmod things by yourself.
If you wanted to go to PHPMyAdmin,
you have to go to localhost@/phpmyadmin and things like that.
But with a control panel you can go in and edit the files on your server
with Windows Explorer or a finder-type application.
Or you can go through and look at your databases with their own tool
instead of PHPmyadmin.
So, there is a lot of choice here, and some of the more popular control panels are up there.
But if you are looking for a host,
then you might want to look at what sorts of customizations and options
they offer me to customize my server and to make my website run better.
So, then you might ask, "Well, how do I choose hosting?"
If you go on to any host website there's a lot of jargon, and there are a lot of options.
There are a lot of different prices also.
Normally I go for the cheaper ones just because websites that maybe you and I make--
and especially right now, especially as starters--they may not need as many resources
as might a website like Microsoft.com.
>> First you want to look at the operating system if you're really curious whether
your site's going to be hosted on Linux, on Windows, or on Mac.
Normally we just go with Linux because that's usually the cheapest,
and also the one that maybe you guys are more familiar with because of the appliance.
And then, maybe they'll put some restrictions on the amount of bandwidth that you get--
like how many megabytes or gigabytes of data can users download
from your website per month? Or disk space.
How much space do you get? Is it 500 MB? Is it 2 GB? Is it unlimited?
Nowadays, a lot of web servers give you unlimited disk space as a way for them
to entice you to get their hosting package.
But if you really think about it, when are you ever going to need unlimited disk space?
If you have a couple of HTML files, a couple of PHP, a couple of images--
that's only a couple of megabytes, and so
usually I just go for maybe a few gigabytes' worth of space,
and that might be enough to start me off until I need more.
>> Finally, they may put restrictions on what sort of--how many databases you can have.
Maybe you can only have 1 database. Maybe you can have 2. Maybe you can have 10.
Is it really important to you how many you get?
Things to ask yourself.
And then finally, just things like languages.
Do they support PHP? Do they support MySQL?
Most hosting websites do support these because they are free. They're open source.
It doesn't cost them anything to provide these for you.
But if you want to use, say, Ruby or Python or some of these other languages--
they may not support it on their server, so it's important to look for those kinds of things.
>> And finally, do they allow you to do some more advanced things like SSL or cron jobs?
SSL is an option where you can make your website more secure by making it HTTPS
and encrypt your connections.
And cron jobs are just maybe scripts that you want to run
every 5 minutes, every 10 minutes, every 15.
A lot of shared hosting websites do put restrictions
on the number of cron jobs that you can run because that takes up more resources.
>> And finally, just everything else that you want to look at--make sure exactly what's going on
before you buy your hosting package.
And finally, performance. Performance is huge.
How fast is my website going to run?
Most users aren't going to wait for even seconds for your website to run
before they just get bored, and they go on to MeanBase and start looking at pictures
of cats--you know that happens, and you want to make sure that you get that user on board
and that you have good uptime which just means that
your website's going to be accessible at all times.
A lot of hosts have really bad uptime and that just means your website's not going to be
accessible, and you don't want that to happen because you might be sad.
And you can also track your host's performance with websites like
Pingdom.com or Host-tracker.com, and they just tell you how often is your site down.
>> And finally, you want to see about their support.
If you have a problem are they going to respond to you within 24 hours?
Are they going to respond to you within 48 hours?
The hosting service that I use normally responds to me within minutes
which is really nice.
Whew! All right! It's time for a break. But I'm not going to give it to you.
We'll just look at pictures of cute cats every now and then.
>> Another really, really big thing is cross-browser compatibility.
What do I mean by cross-browser compatibility?
You know, nowadays it's not just Microsoft Internet Explorer.
It's not just Mozilla Firefox or Safari.
Now we have Chrome. We have Opera. We have Dolphin. We have Camino.
We have Conqueror. We have all of these different browsers.
Things that are coming out now--RockMelt--though those are all based on Chromium.
But the fact of the matter is, there isn't just one browser anymore.
You're not just viewing these webpages with one application.
And so, different browsers will respond to different HTML, different CSS, and
different JavaScript differently, and how do you deal with that?
Well, in certain cases, you really can't.
Your website--if it works in one browser, the code that you wrote will not work
in another browser, and it's your job to make sure that the code that you write
is universal, that it works everywhere.
So, this is really dangerous.
If you say, "Well, it's working on my computer. Great! Let's move on."
Well, it's probably not going to work on mine, and when I go to your website
I'm going to be very sad, and I'm going to leave right away.
So, let's see how you can prevent this.
>> The first thing, of course, is to only use standard HTML, CSS, and JavaScript.
What do I mean by that?
Well, there are a lot of not standard things out there.
For example, in CSS there are many versions.
If you see any CSS rules with -moz- or -webkit-, those rules are specific
to both the Mozilla browsers and the Webkit browsers,
and so you want to make sure that maybe you want to avoid those things
because if you use -moz- that rule is only going to work on Firefox.
And if you really want it to look good on Internet Explorer also,
you're going to be out of luck.
For HTML also, you could do things in HTML that work in one browser
but that breaks in another, and you want to avoid that as much as possible.
And finally for JavaScript even--there are many versions of JavaScript,
and this summer we ran into a problem where Document.getElementsByClassName--
which is usually a function that's defined as a part of the JavaScript standard--
was not to find in Internet Explorer 8.
So, over the summer I was working in a lab and we were building online experiments.
And we thought it was working really well until we realized users that were using
Internet Explorer 8 could not submit their results.
We were missing out on a lot of data. That made us really sad.
So, you always want to make sure that your scripts are going to work everywhere.
>> And finally, use validator.w3.org
which is what we tell you to do in pset 7.
Make sure that your pages are validated.
That's important because that at least is a first step sanity check.
Is my code actually standards compliant?
Another way to sort of help you make sure that your site is going to work
under most circumstances is to maybe use some libraries and frameworks
because these really smart developers have thought about these issues for you.
They've gone through and they've written different functions that work across browsers.
For example, we use jQuery in Pset 7.
Even though you may not have seen it, jQuery provides a lot of functions
that otherwise you would have to write yourself.
But these developers wrote it, and they made sure that it works across all browsers.
And Bootstrap--which is another CSS framework that we showed you in Pset 7--
it really takes away a lot of the headaches with designing websites that look good.
in all browsers.
>> And finally, if you can avoid it, I usually avoid coding from scratch.
If you're just creating a website for your school club, for example,
and all you need to do is to display a few pages and maybe have your president go in
and change a few things here and there--there's really no need to code that up yourself.
That takes a lot of your time.
It takes a lot of your energy, and you have to go through and you have to find out,
well, is this going to look good in this browser, is it going to look good in this browser.
Maybe use some of these patches that others have already written for you, like
WordPress or Joomla or Drupal.
These are called content--these are called CMSs which basically are just packages that
already come done for you, and you can download them, put them onto your server,
and customize them however you want, and you already have a running website.
Those code packages are something to look in to.
These things are open source unless you go for something like--
if you're looking for a form package, there are things that are not free like
VBulletin or IP.Board.
If you don't need some of those advanced features,
you can always opt for the free option.
>> And finally, there is no avoiding it.
You must test, test, test.
You must test your code on all of these browsers and on all of these platforms.
And you know, IE6--thank goodness people have started moving away from IE6
because back in the day, maybe a few years ago, web developers had to always, always,
always pander to IE6's weaknesses in following the standards.
Websites just looked kind of 1990's for lack of a better way to deal with it.
You can also use browser screenshots to check your CSS.
One really cool website is browserlab.adobe.com.
This is a complimentary service put out by Adobe.
And what they do is they can take screenshots of your website
running under different conditions--like running under different browsers,
running under different platforms--and show you what they look like.
Just to show you what I mean here, I created a website last year called Life At Harvard,
and what I tried to do--I tried to make my.harvard better.
Because if you were here last year, my.harvard did not look as it looks now.
It looks kind of disgusting.
But now it looks a lot better.
My implementation wasn't that useful anymore, but all the same,
you know, I tried to add--(unintelligible) many whatever--
and it looks--it looks very good on my computer.
And then, maybe if I'd had more time I would have gone on to browser lab,
and I would have looked at, well, how does it look in Chrome 18 on Windows.
I would scroll down and I would see--oh no! Look at the announcements box.
My text was overflowing. So, that's bad, right?
If a user is using Chrome on Windows and comes to my website,
that immediately looks very unprofessional.
So, I should go into my CSS and find out what part of my CSS is breaking here.
Why isn't it displaying correctly and fix it so that all users can see the same website
and be just as happy.
>> And finally, well, browser screenshots are nice for testing your CSS,
but what about your JavaScript?
What about if you have some complicated script that's running?
Well, you can always do virtualization.
If you have a Mac you can use Bootcamp or VMWare to virtualize maybe a copy of
Windows and use Internet Explorer there.
Or, you can go on to something like Spoon.net, which unfortunately only works on PCs.
But what they do is very cool.
They virtualize software for you so you can run different versions of IE, for example.
You can run different versions of Firefox.
You can run different versions of Safari and test out all of your websites there.
Unfortunately, they are not free.
That is a paid service, so there's always sort of this--
there's always sort of this trade off between, well, am I going to make my website look good.
If so, I might have to pay for some services to help me do that.
Any questions at this point about anything that we talked about?
Awesome. Okay.
>> Now we have more things to talk about.
How about errors?
How do you make sure that your website is going to operate even when
something bad happens?
Maybe you don't have a page named food.php.
But me, I go to your website and I try to access food.php.
Are you just going to show me that white page that says 404--File not found?
Or are you going to say, "Well, I'm sorry that I couldn't find this for you,
but maybe here are some other resources to help you search for what you need."
Other errors--so, this is called HTTP errors which are just some error codes
that your server might have sent back to the browser in case of something bad happening.
400--Bad Request. 401--Unauthorized.
403 is kind of common when you have a directory that's not supposed to be accessed
by the user, but the user tries to anyway.
And 500--Internal Server Error--that usually happens when you have something
really bad going on with your PHP code.
But in any case, these sorts of browsers--these sorts of errors do happen.
>> So, how do you make sure that you gracefully handle these errors
and make sure that the user is not just sort of hanging there?
Here comes .htaccess.
Now, .htaccess is something that works on Apache servers,
something that works and works on a few other servers as well.
This is just a way for you to configure your server such that
you can make it do whatever you want it to do.
Some things you could do. You could control your cache settings.
Maybe there's a certain page on your website that you make sure that the user
re-download every time the user comes and visits your website.
Or maybe you have some URL that's like yoursite.com/test/html/pages/hello.html
and you just want that to be yourname.com/hello--well, you can use .htaccess
to redirect one webpage to another.
You can also use it to do authentication.
Maybe there are some portions of your website that you need to use another password.
You can block certain IP addresses, block certain domains.
Maybe you just really don't like Harvard students using your website.
Well, you have the option of blocking all Harvard IP addresses.
>> Finally, you can treat things--you can write certain code to make your server
treat like .zhao or .your name or .hello pages as PHP code.
Maybe that'll be useful. Maybe that won't be.
And finally, you can use it to handle error responses.
What do I mean by that?
If you simply add code like this--ErrorDocument 404 and then direct them to some
error page, you can make sure that the user doesn't just see the really, really ugly
404 and show them something nice.
>> Let's actually take a look at how we can do that with your Pset 7.
Here, I'm in my appliance.
I'm going to open Chrome, and then I'm going to try to access a page
that doesn't exist on CS50 Finance.
So, local host--cats.php--so, notice that I created an error document
that says, "Canz not find z page!!"
It has a very sad cat on it.
If you go on Twitter, if you go on any of these other sites,
you can't find a page, they usually try to show you a cute picture
so that you're not too disappointed.
You could also have something that's more professional that says,
well, I'm sorry I couldn't find the page, but maybe here's a search box.
Or maybe here are some links that will help you find the link that you want.
So, how did I do this? How is this even possible?
If we go into our terminal here--
I'm just going to zoom in a bit--
notice that I have a new page.
Inside my HTML directory it's called--you can't see it--
it's called error.php.
And error.php is just a file that I made
that shows you that page itself.
I can show you what error.php is.
It's exactly this page.
It says, "Oh no! Canz not find z page!!"
And, if you want to see--so, notice that .htaccess sort of is a weird name.
It starts with a dot which means that it's a system file.
It's a hidden file which is not normally shown.
If you do ls-a, you can see all of the hidden files in a certain directory,
and indeed, you see .htaccess is one of them.
Let's go ahead and open .htaccess--
with gedit--
Boom! All I have is one line in there--Error document for 404 errors
which are also known as file-not-found errors.
Let's redirect them to something called error.php.
You can have fun things like canz not find z page!!
And there are also very cool things that you can do with .htaccess.
If you want to see more .htaccess magic,
this is a very cool website to go to--it's called javascriptkit.com/howto/htaccess.shtml--
if you want to perform more server magic. And it could be very fun.
>> Whew! All right! More cute pictures.
This is a guy doing push-ups, and his cat is trying to help. I think it's very cute.
Unfortunately, I don't have a cat like that.
All right. So, we've talked about .htaccess.
We've talked about error handling.
We've talked about hosting, domain names.
We've talked about cross-browser compatibility.
Now how do we make sure that your website actually performs?
How do we make sure that if I go to your website
I can see your page within a few seconds?
One of the things that I think people just sort of forget about
is image optimization.
Let's say that you wanted to put a picture on your site
and it's 2 MG large.
That might be fine for us because we're at Harvard,
and we have a very fast Internet connection.
But imagine someone in China. Imagine someone in India.
imagine someone maybe in rural Kansas who maybe doesn't have the same sort of
broadband Internet that we have.
If you have a 2 MB image on your site and the user is trying to access it,
it's going to take them a really long time to download.
So, if you don't need that sort of resolution,
then you can resize your image with something like Adobe Photo Shop.
There's usually an option called safe for web and devices,
and what it does is it strips out all of the unnecessary information
and sort of compacts your file into a small image size so that you can
put it onto your website, and any user who tries to download that page
is going to download a smaller version of your image.
If you don't have Adobe Photo Shop
webresizer.com is also another resource where you can input your image
and it will spit out the exact same image,
but it will be something like 3 times smaller.
So that's very useful for your users.
>> Another thing that you can do is minify code.
If we take a look at Google.com,
you'll see that it's not sort of the same HTML and CSS that we're used to.
Just going to look at the source code here.
If I just scroll down--wow, that looks pretty disgusting.
This would get a zero on style.
If you coded this for your Pset, you will get a zero on your style.
This has no spacing. The names look really cryptic.
It's all really disgusting.
And the script to close in the body--the closing HTML--
they're all together--all smushed together.
Why do they do this?
They minified their code.
Notice that this document is going to be a lot smaller
for me to download than something with white space,
than something with really long variable names.
If you minify your code you strip out all the white space.
Of course, your browser doesn't care if you have any white space in your code.
You strip it out, now I can download a smaller file--
now the file--the document that we're going to download has a smaller file size,
it will be faster for me to download, and that's useful.
If you're working with websites and you're launching a website,
it's almost always good to minify your code.
Another reason why it might be good is maybe you don't want others to use your code.
Maybe you don't want others to use your CSS.
You know if you really wanted to be stingy with that,
then you can also minify your code, and it would be harder for me to steal it
because I have no idea what's going on.
You can also go to websites like minify.avivo.si.
Services like this online help you minify your code so that you don't have to do it by hand.
Definitely do not do it by hand.
>> Okay. Now speaking about scripts.
Maybe in your PHP code there's something that you don't need to do.
Maybe there's extra loops in there.
We talked about code design in CS50.
Even if you're coding in C if you have--if you're doing extra work
that you don't need to do, well, that's going to slow down your scripts on your website,
and this is especially important for websites because users nowadays are very impatient.
If you're doing unnecessary work, it's going to take them longer
to get to the information that they want, and they're going to be very unhappy.
Finally, you may want to optimize your database tables.
Remember we talked about indexes.
They're not only good for making sure that you have a row that's unique.
They're also good for making sure that your database works fast.
If you want to read up on that go to the MySQL documentation,
or you can look at--well, how do I optimize my database table?
How do I make sure that I have indices that help me get to the information faster?
>> There are also little tricks that you can use like caching.
If you have PHP--if you have a blog, for example,
and you have--and it's powered by PHP or by any other language--
you can cache your blog at let's say 50-minute intervals so that you can serve static pages
or static HTML to the visitors to your site.
That way the users don't have to run your PHP script every time,
and maybe that will be faster for them to access that information.
>> And finally, you can use something like CDN.
Notice that whenever you download a Pset,
you always go to CDN.CS50.net. Why is that?
CS50 also uses sort of like a CDN--a content distribution network--
which just means that it's a bunch of servers maybe somewhere around the globe
that help serve your pages to your visitors.
If your visitor is getting a page from a server that's closer to them geographically,
then most likely your visitor is going to get that file a lot faster.
There are also sources online that help you do that.
One of them is CloudFlare. They offer a free CDN service.
If you have large files that your serving to your users,
then perhaps it's better to put them on a CDN so that they can get to them faster.
>> The final topic for the day is search engine optimization.
What is search engine optimization?
That's making sure that search engines like Google or Bing or Yahoo
can go on to your site and crawl your site and index your site and when
I, for example, go on to Google.com and I try to search for something,
then your site will pop up.
How do you make sure that your site is one of the top 10?
Because as we all know, if you search for something on Google
and it's not on the top 10 you're most likely not going to look in the next 10.
This is sort of a topic that's shrouded in mystery.
There's a lot of hype out there on the Internet.
There are a lot of superstitions about if you do x then Google will like you better.
If you do y then Google will like you better.
It's probably better to look into the search giant's documents itself.
>> This is one of the documents on Google that tell you exactly how to optimize your site
so that Google can access and index it very nicely.
You don't have to copy down this URL because this presentation is going to
be online anyway.
If you look at this and you read this there are some very helpful hints in there.
The Google tells you--if you really want your site to be indexed well
then you should do all of these things.
>> Another thing that search engines really like is fresh content.
If you have content that's updated very regularly
then search engines say, ooh, I like your site.
I'm going to go to your site very often.
I'm going to index a lot of your pages.
If you have fresh content then you're more likely to show up--
you're more likely to be more relevant.
You're more likely to be more updated,
and search engines are more likely to put your site above others.
>> Deep links are also important.
If you really wanted your site to look good in a search engine's eyes
have a lot of other websites linked to it and linked deeply into your website.
Don't just link to your homepage.
Link to maybe yourname.com/something/something/something.php.
That--to a search engine--means, wow, they have really interesting content
that someone else is linking so deeply into their site that I should really, really
put more importance onto that site's pages.
>> If you have accurate page titles, if you have no errors that's good because
if a search engine is trying to visit your site, and it's getting an error,
it's probably going to give up very, very soon.
And finally, you want to have a fast load time because search engines--
just like humans--don't have a lot of patience for slow websites.
This is a way for you to make sure that you show up higher in
search engine queries and hopefully thereby get more traffic.
Because after all, you've spent all this time developing your website.
You spent all this time launching this website online.
You want to make sure that you have plenty of users who actually see your content.
>> Other good resources to use.
Google Webmaster Tools is something to look in to.
This just helps you to see--Google isn't indexing my site.
What sorts of errors is it encountering?
How many pages has it indexed?
What does it think is the most important content on my page?
Maybe that's not what I want it to be.
Maybe I need to change my website a little bit such that it's reflected better
what my website is really about.
Google Analytics is another really cool tool.
You can add a little bit of JavaScript to your pages.
And then afterwards you can go to Google Analytics, and it will track
your visitor demographics and your site growth.
It will tell you exactly how many visitors visit your site
within a certain day, within a certain hour, within a certain week.
How many visitors from China? How many visitors from Antarctica--
you're getting to your website.
that might be something cool to see or it might even be useful
because you're trying to target a certain group.
Maybe you're trying to target teenagers with your website, and you see that
most of the visitors to your website are maybe 30- to 40-year olds,
then maybe either you have a problem or you can just say,
well, then maybe I should just change my website's focus so that
I focus more on that age group.
>> Google Apps--if you wanted to have sort of emails with your domain name--
maybe something like yourname@yourname.com--
you can use gmail addresses--you can use the gmail service
and Google Apps is one way to do that.
You can set up specific email addresses that are specific to your domain name
instead of @gmail.com.
>> And finally, there are web developer extensions and add-ons--for Chrome,
for Firefox, for other browsers--that allow you to go in and inspect
CSS, inspect JavaScript, see exactly what's wrong with your JavaScript script,
and maybe that'll be useful for your de-bugging purposes, for you finding out--
well, why isn't my website displaying correctly in this browser?
>> And finally, if you wanted to learn more about all these topics--
if you wanted to learn more about HTML and CSS and JavaScript--
because after all, we only taught you a little bit--
you can go websites like W3Schools.com to look for more resources.
They have very nice tutorials on how do I do x, or what does y mean?
If you wanted to learn more about these languages you can simply go here.
>> All right. I think I wanted to leave the last few minutes of this for questions,
so are there any questions about anything that we talked about?
[audience member] What kinds of things are on W3Schools and how is it covered?
[Yuechen Zhao] What kinds of things?
So, one of the very biggest things that I use a lot is their references.
Their references detail, for example for CSS--
what this means or if you wanted to change the background of a page--
how do you do it?
Which browsers support that command? Things like that.
And then they also just have very nice tutorials on HTML, on PHP, on JavaScript,
on MySQL, on all sorts of different topics.
They have nice tutorials. They teach you how to do things.
It's nice to be able to go and learn more about these topics.
>> [audience member] HTML 5 is still not compatible with all the browsers out there.
Would you recommend just staying away from it because of compatibility issues?
How would you deal with that?
[Yuechen Zhao] Yes, so, the question is HTML5 is still a baby standard.
It's not really supported by a lot of browsers, so should we avoid it?
I think last year I would have been a very big proponent of, let's avoid HTML5
because it is still--it's still very much new and in fact, the HTML5 standard
has not been finalized yet.
And so, there really is no HTML5 standard.
But I think especially if you're designing a website now,
it might be better if you just go with HTML5 because that's sort of going to be the future,
and if you want your website to be future-proof and you want your website to work
in future browsers, it might be better to start building something for the future
than for the past, and also just because of the fact that HTML5 really isn't that different
from HTML4 or XHTML.
If you are using HTML5, it normally will work in most browsers.
You just have to sort of go in and make sure with these screenshots
and making sure with going on to these websites yourself.
But most likely it will work unless you're using very specific features to HTML5.
Notice too that for CS50--for example, for the video player that we use--
it uses HTML5 and HTML5 video to display the lectures.
But if you have a really old browser, then it'll fall back on Flash.
So, that's also something else--
have a fall-back system for when you just know that the browser isn't going to handle
what you want it to handle.
>> Other questions?
Anything that we talked about.
All right. Then I think that's about it for me.
I think that's it.
(applause)
Cool.
[CS50.TV]