Interactive Module Uploading & Maintaining Websites

Interactive Module

Uploading & Maintaining Websites

Jason Mayo

[email protected]

This slideshow plus files used today, will be placed on:

- Preparing for Upload

- Domains

- Hosting

- FTP

- DNS / Registrar

- Workflow

- Backup / Version Control

- Debugging

If anybody has finished their website, if you want, I can check over these at the end of this lesson to make sure they are ready for the web.

1. Ensure all your links are working

Check your website thoroughly, clicking every link. You don’t want any dead links, these will put the user off coming back to your site. Ensure all link names are solid names, no spaces. For example:

big long file name.html INCORRECT

biglongfilename.html INCORRECT

big-long-file-name.html CORRECT big_long_file_name.html CORRECT

File names with spaces in will look ugly on a server, when clicked: big%20long%20file%20name%20.html

2. Paths to images don’t link to your computer files

Check that your image paths link to your folder correctly, not to a weird folder structure on your computer. This should be fine if you have a nice/clean folder structure. For example: images/image-name.jpg CORRECT

/Users/jasonmayo/websites/website-name/images/image-name.jpg INCORRECT

Preparing for Upload

Preparing for Upload

3. Spell Check!!!!

Please check all your spelling/grammar on your website before you put it online. There’s nothing worse, than launching the site, and realising you spelt your email address incorrectly!

4. Ensure no files are missing

This is all down to your folder structures, ensure every file your linking to exists somewhere in your folders

5. Folders / Filenames are ALL in lowercase

I can’t stress enough how important this is (You will realise this later on in the slideshow...)

BIG_LONG_FILE_NAME.html INCORRECT

Big_Long_File_Name.html INCORRECT

Big_long_file_name.html INCORRECT

To get online...

Server / Host

User

Domain

Boring Techy Stuff...

Every server on the Internet has a unique number. It’s called an IP address. A domain name is like an alias/name for that IP address…a more memorable way of identifying a server on the Internet. For example:

http://72.10.52.50

http://swiftyscooters.com

But it’s a bit easier to remember, right?

So we need to buy a Domain Name, to point to a server...

.com .co.uk .info .net .org .edu .gov

Every domain relates to something, and pretty much every country has it’s own domain. .ru

.jp .es .de

Buying Domains

1&1 Internet

www.oneandone.co.uk

(Don’t buy hosting from these)

Heart Internet

www.heartinternet.co.uk

123 Reg

www.123-reg.co.uk

Once you have bought a domain, you need to point this to a server or a host. A server will have all of your website files on it. So when a user types in your domain, it loads this server up full of your files, and presents them with your website!

But wait, there are a few different types of servers... Just like there are different types of computers (PC & Mac) there are different types of servers:

Both servers will run HTML, CSS & Jquery. It’s just good to choose the correct server, incase you want to expand your site. I.e, place a Blog on it using Wordpress etc

Hosting

Windows Servers

Run windows based software on them e.g. ASP

MS SQL .Net

Linux Servers

Run everything else!

PHP MySQL

After all this techy talk, you just need a Shared Linux server to run a small Portfolio site. It’s just good to know the difference when your presented with them.

Hosting Continued

Shared Server (All use the same IP Address)

Dedicated Server Your Website Other Website Other Website Other Website Other Website Other Website Other Website Other Website Your Website

Buying Hosting

for portfolio / small websites

You can buy hosting AND domains combined with these companies

If you fancy moving into web design / development, then it’s important to know what is right for your clients in terms of hosting. Things you need to consider:

1. How big is the website?

This will mean choosing between a Shared or Dedicated service

2. Do they already own domains?

A lot of clients will already own a domain, but will have jumped between hosting providers. So it will probably be your responsibility to link a domain with a hosting provider (DNS).

3. What is the site built with?

This will mean choosing between a Windows or Linux server. If the sites built using PHP & MySQL you will mainly go with a Linux server

4. What is their budget?

Getting quotes from hosting companies is good if your working on large sites, some companies can offer ‘bespoke’ servers, which will save you and the client money.

5. Leave space for growth

Ensure you leave enough space for the website to grow. For example if it’s a shop, on startup they may have 20 products, but in a few months time, they may have 500.

If you have previously bought a domain (or your client has) you will need to point it to a server. In technical terms this is done by changing the “Domain Name Servers (DNS)”

Remember, earlier I said that Domains link to an IP addresses of a server? Well, a “Domain Name Server” keeps hold of this IP address. So changing the IP address on a DNS allows you to point a domain at any server you want. Allowing you to switch hosts/servers whenever you want.

Generally this is done at the place you bought you domain from.

FTP (File Transfer Protocol) is the simplest and most secure way to exchange files over the Internet. This basically allows you to Download or Upload sites from a server, quickly.

FTP’s coming in the form of Programs that you install on your computer. Connecting to your server via an FTP program will give you access to your server and all the files on it.

How FTP works...

Server

FTP

Program

Your

Computer

1. Your website is on your computer. You then pass this on to the FTP program.

2. The FTP program

processes these files and places them on the server.

3. Once they are on the server, they are viewable by people typing your website address in.

FTP Programs (Mac)

FTP Programs (PC)

Once we’ve bought our Domain & Server/Hosting, our site is ready for upload AND we have our FTP program installed. It’s time to upload our website, to do this we need to connect to our Server via our FTP program.

1. Launch the FTP program

2. Enter your “Server Address” (This is sometimes an IP address OR your domain, e.g. ftp. madebyshape.co.uk)

3. Enter your “Server Username” 4. Enter your “Server Password”

5. Hit Connect (Depending on which FTP program you use)

6. Once your connected you generally see a “www.” Or a “public_html” folder (If you bought hosting from one.com then you won’t see any folders) choose one of these

7. Drag across your files, to that folder. 8. Let the files upload.

9. Done!

Connecting to FTP

Your Server Username, Password and Address will be sent to you in an email when signing up for your Host. If this isn’t sent in an email, you may need to create it yourself by logging in to your host’s website.

Ok, so your website is uploaded perfectly! Don’t just stop here.... You need to go and check your website is working correctly.

Even though we prepared our site, something could still have gone wrong.

If it’s a client website, it’s definitely important to check the site. Because it will be your responsibility if it isn’t working.

Uh oh, Where are your images?!?!?!

Sometimes you upload a site, to then realise that all your images are either invisible OR you have the dreaded little red cross. The reasons for this could be:

1. The image doesn’t exist on the server

This could be due to an error in uploading the site. So first check the image is on the server in the folder your locating it from

2. Your linking to an image that doesn’t exist

Check your Image paths in your HTML files, ensure its linking correctly. Ensure the path isn’t linking to your computer.

You spelt your image file names in Uppercase or with Spaces

Tut Tut Tut...

Go back and change all your file names to lowercase.

Your clicking around your site, checking it’s all fine and BAM, you hit a “Page Not Found” or a “404 Error”. Below are a few examples on how to find and fix this problem:

1. Check the page exists on the server

You may have missed uploading a page, or an error occurred. Reupload the file if it isn’t on the server.

2. Check you are linking correctly to the page

Ensure your link is pointing to your URL, not to your computer

3. External Links

When linking to an external site or away from your site (Twitter etc) Make sure you put “http://” before the URL.

4. You spelt your file names in Uppercase or with Spaces

HTEAHJJNGBDAGRWASFCARESEW!!!!!!!!!

If your linking for “pageone.html” and the server version is “PAGEONE.html” the server will not be able to find this. Go back and change all your file names to lowercase.

If you load your site up and it looks something like this:

You have either:

1. Don’t have an “index.html” file in your main server folder OR

2. You have called it something else like, “home.html” or “index2.html”

Your links work fine, images are fine, index.html is in place but your site is loading really slow, and your images look like they are slowly revealing on the page. A few problems could be:

1. Check your image size

If your stating in your HTML that the image should be 100px wide and 200px high. But your actual dimensions of the image are 5400px wide and 7000px high, then this will slow your site loading time down. Resize your images to the correct size

2. Server

It may not be your problem, it might be a case of the Hosting / Server company are having a few problems or someone else on the shared server is hugging all the memory and power!

3. jQuery

Sometimes loading lots of jQuery files can slow the site down. Possibly reduce the amount of jQuery files, or Compress them using an online Javascript Compressor

4. Too much code

If your CSS file contains lots of repeat code, then this will slow the site down because it has to keep rendering all of this code. Go back and possibly make some bits classes over ID’s

Once your happy with your site online. Make sure you check it in all Browsers....

Remember, it’s not only you visiting the site, and everybody uses a different browser, and most browsers render code differently.

Check your site in:

• Internet Explorer 7, 8, 9, 10

• Firefox

• Chrome

• Safari

• Opera

It may look the same in every browser if your lucky, but if it doesn’t then you may need to tweak your CSS file slightly to make it work in all of the browsers.

Common problems are usually, Margins, Padding, Widths and using techniques some browsers don’t support (e.g. HTML5 or CSS3)

Generally, Internet Explorer will mess something up (sigh) so rather than tweaking our main CSS file, we can specifically target each version of IE (Internet Explorer) with something called a “conditional comment”

A conditional comment is basically saying:

If the users browser is IE8, then load this other stylesheet

and in coding terms this is how it looks:

So all we’re doing is creating another stylesheet called “ie8-style.css” and linking it in like we would normally do. Except we’re wrapping the Conditional Comment around it.

Now when the browser loads, and it’s Internet Explorer 8, it will locate this stylesheet and amended the website to whatever we tell it to.

http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

Browser Debugging

<link rel=”stylesheet” type=”text/CSS” href=”CSS/style.CSS” >

<!--[if IE 8]>

<link rel=”stylesheet” type=”text/CSS” href=”CSS/ie8-style.CSS” >

<![endif]--> 1 2 3 4 HTML

If you want to view the code, when the browser has rendered it “Google Chromes Inspect Element” allows you to view the code, sizes etc and makes debugging 100% easier.

Phew!

Your site is uploaded, debugged and working perfectly! Easy huh?!

But, you may want to update your site again in the next month or so with a new piece of work, or add a new page.

This is where maintaining your site comes in, and the next few slides will recommend little bits to make this process easier.

Every time you visit a website, all the files including the CSS, Images, HTML gets downloaded to your computer to a folder called “cache”

This speeds up the process of loading the site, the next time you visit. By letting the browser load files from your computer, rather than the server.

Generally this is good. But for a web designer/developer updating a website that’s on a server - can be a nightmare.

If you’ve uploaded a file that you’ve just changed, and you then go to preview the file, and it doesn’t update. This is possibly because the browser is being lazy and it’s loading the cached file, and not recognised the file has been updated.

To get around this you sometimes need to clear your Cached files.

Version Control is the ability to save copies of files/folders whenever you make a change (minor or major) so you have the ability to go back, incase you make a mistake. Tips to version control:

1. Create a backup

Before changing any files, you could back them up. It’s sometimes good to create a folder inside your website folder called “versions” or “backup” and then simply copy and paste the files your going to edit, into there.

2. Naming files

Once you’ve created these backup files, its possibly worth renaming them. Some people label them by version number, others by date/time:

index-v.1.1.html

index-20-02-2012.html

This way its easy to find the files to go back to.

Using version control will help cover your back, and you can easily revert back to saved files and add features back in, which you recently removed.

Some developers also keep a “note file” which states everything that has been altered.

If you’ve saved backup files, but don’t know what has changed. You can use “Comparing” apps such as “Kaleidoscope” that allow you to load 2 files up, and it will look for changes.

This won’t necessarily boost your workflow up a bit on sites currently built. But it will speed things up on the next site you build.

Frameworks / Boilerplates - are folders that already contain fundamental files. So you can quickly create websites, without the initial setup.

You don’t need to create all the folders, HTML & CSS files, link them up etc. It is all done for you. Generally Frameworks / Boilerplates contain:

• HTML & CSS files, already linked and with basic structure • Reset File

• Favicons / Icons • jQuery plugins

You can either create your own, or download them. A good HTML5 boilerplate can be downloaded here:

http://www.html5boilerplate.com

After uploading sites, you may notice minor things that are missing. Generally people forget about these little bits:

1. Favicons

These are the little icons that site next to your website address. Most of the time they are logo or a colour. You can easily add these by creating the icon in Photoshop and then linking to it in the HTML.

2. Document / Site Titles

If you look to the top of your browser and it says “Untitled Document” then you haven’t

entered a title for that page. Generally titles should mention what your site is called, then the page that your on.

3. Emails

Bit’s you may have missed...

<head>

<link rel=”shortcut icon” href=”images/favicon.ico” type=”image/x-icon”>

</head>

1 2 3

HTML

<title>About Us / Shape Design Studio</title>

1

It’s not all about sticking to the ‘Adobe’ suite, there are some programs that can help you work quicker, and that are used within industry. It’s worth learning other programs...

Programs we use...

Designing for Mobile (AM)

Coding for Mobile (AM)