Interactive Module Uploading & Maintaining Websites

Transcription

1 Interactive Module Jason Mayo This slideshow plus files used today, will be placed on:

2 Talking about... Preparing for Upload Domains Hosting FTP DNS / Registrar Workflow Backup / Version Control Debugging

3 Finished Websites 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.

4 Preparing for Upload 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 biglongfilename.html biglongfilename.html big_long_file_name.html INCORRECT INCORRECT CORRECT 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/imagename.jpg CORRECT /Users/jasonmayo/websites/websitename/images/imagename.jpg INCORRECT

5 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 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 big_long_file_name.html CORRECT

6 To get online... Domain Server / Host User

7 Domain Names 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: is the same as going to But it s a bit easier to remember, right? So we need to buy a Domain Name, to point to a server...

8 Available domain names.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

9 Buying Domains 123 Reg 1&1 Internet Heart Internet (Don t buy hosting from these) (Don t buy hosting from these)

10 Hosting 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: Windows Servers Run windows based software on them e.g. Linux Servers Run everything else! ASP MS SQL.Net PHP MySQL Case Sensitive! 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

11 Hosting Continued Shared Server (All use the same IP Address) Dedicated Server Other Website Other Website Other Website Other Website Other Website Other Website Other Website Your Website Your Website 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.

12 Buying Hosting One.com Rackspace Heart Internet Recommended for portfolio / small websites NOTE You can buy hosting AND domains combined with these companies

13 Choosing Hosting for Clients 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.

14 DNS (Domain Name Servers) 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.

15 FTP 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.

16 How FTP works... Your Computer FTP Program Server 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.

17 FTP Programs (Mac) Transmit 20 (Free Trial) Cyberduck Free FileZilla Free Recommended

18 FTP Programs (PC) Smart FTP 24 (Free Trial) FileZilla Free Recommended

19 Connecting to FTP 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! NOTE Your Server Username, Password and Address will be sent to you in an when signing up for your Host. If this isn t sent in an , you may need to create it yourself by logging in to your host s website.

20 After Uploading... 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.

21 #1: No Images 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.

22 #2: Page Not Found / 404 Error 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 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.

23 #3: File List View 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

24 #4: Slow 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

25 Browser Checking 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)

26 Browser Debugging 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: HTML <link rel= stylesheet type= text/css href= CSS/style.CSS > <![if IE 8]> <link rel= stylesheet type= text/css href= CSS/ie8style.CSS > <![endif]> So all we re doing is creating another stylesheet called ie8style.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.

27 Debugging 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.

28 Site is online and working... 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.

29 Cache 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.

30 Version Control 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: indexv.1.1.html index 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.

31 Version Control for Designers

32 Kaleidoscope 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.

33 Frameworks / Boilerplates 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:

34 Bit s you may have missed... 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. HTML <head> <link rel= shortcut icon href= images/favicon.ico type= image/xicon > </head> 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. HTML 1 <title>about Us / Shape Design Studio</title> 3. s

35 Programs we use... 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... Coda VMWare/Parallels MAMP Codekit Wunderlist Coding Editor Windows on a Mac Local Server Coding Helper! Project Management Others: Sequel Pro Tower Transmit Kaleidoscope LESS

36 Next Time... Designing for Mobile (AM) Coding for Mobile (AM)