ETSU Logo

CSCI 1210

Essentials of Web Development

Lab 0 Instructions

In this lab, we will familiarize ourselves with the software applications we'll be using this semester. As mentioned in the syllabus, these tools are free and can even be installed on a flash drive.

As I've mentioned in class, and is written in the syllabus, you must have a form of external storage - either a flash drive or an external hard drive - for this class. It doesn't have to be huge; 4GB is plenty [2GB would be more than you'll need for this class, but I doubt you can still find one that small]

Brackets

We will do most of our work this semester using two (free) applications. The first is Brackets. Brackets is a file editor that has a lot of functionality built into it.

  1. Double-click on the Brackets icon on your desktop display to launch it
  2. Pictured below is what you'll see after it loads (if a dialog window appears telling you that an update is available, just cancel out of it.)
Brackets desktop
Brackets
  1. Note the tools and menu items that are identified. You'll use them the most
  2. Click File -> New. Notice that a new file tab opens up, named 'Untitled-1'
  3. Click on the editing area (the white area in the middle), and enter

    Hello World!
  4. Notice how the file tab now has a dot. This is Brackets's way of telling you that there are unsaved changes to your file
  5. If you brought a flash drive, insert it in a USB port
  6. Click the 'Save' button on the tool bar. Click 'My Computer' (or whatever your PC is named) on the left (1, below)
  7. Locate your flash drive and double-click on it
Saving a file
Saving a file
  1. The display will look a little like the picture below (probably not as busy, but something like it)
  2. Enter hello.html into the File name field and click 'Save'
Saving a file
Saving a file
  1. After the file's saved, click the 'Live Preview' button on the right
  2. Víóla! You made a web page

FileZilla

So, the other application we'll be using a lot this semester is called FileZilla. FileZilla (FZ) is a File Transfer Protocol (FTP) client application that we use to transfer files from a client computer (yours) to a server and/or from a server to a client. This is a very old and stable protocol. BUT... It is very important to remember that it is not secure! DO NOT use FTP to transfer sensitive information!

Another thing that is important to understand is this (and I've heard it over and over and OVER again over the past few years)...You are not uploading files to FileZilla. You are using FileZilla to upload files to the server. It is an application, not a machine. Say that to yourself. Please. Now, say it to yourself again. Once more...it can't hurt. FZ is an application that you use to connect to a server and upload/download files. [You may think I'm going a little over the top with this, but Im serious. It is critical that you understand the Client/Server architecture, here]

client-server analogy
Recalling the Client/Server Analogy

Connect to the server with FileZilla

  1. OK. So, let's connect to the server, http://www.csci1210.com. What you're doing here is logging in to your account on the server in order to upload your completed web files to it so the world can see them
  2. Double-click on the FileZilla icon on the desktop (or click on the Cortana -- sheesh -- button and enter 'FileZilla', and then click on the FileZilla link)
  3. Now, you're going to be presented with a very busy display. If you feel overwhelmed, feel free to watch my video, that may help you deal with the FZ interface
Freeking FileZilla
Freeking FileZilla
  1. Here are the most important things to understand about FZ:
Understanding FZ
Understanding FZ
  1. So let's log in to our accounts. I've provisioned an account for each of you on my server, much like a commercial Internet Service Provider (ISP) would. Think GoDaddy. Your account name is your ETSU ID. For example, my ETSU ID is ramseyjw. So I would log in as ramseyjw. The server name is csci1210.com. I will give you your account password in class. Really?... putting it out here would get us hacked in a second! I'll show you sometime. By the way...I won't email it to you, either. I've been asked. Nope. Try to remember it, please. Once you've entered the Host name, your Username, and Password, click on the Quickconnect button, and.....you're in!
Logging on to your account
Logging on to your account
  1. On the right, you'll see '/' in the Folders pane and a list of folders I've already created in the Folders pane. There are homework (ha ha!), images, js, labs, midterm, and project folders:
    • homework: I loathe homework as much as the next guy. But in order to learn this stuff, we have to work on it outside of class. There will be a series of HW assignments preceeding your semester project (see below)
    • images: Experienced web designers know to create separate folders to contain similar files. It makes it easier to maintain web sites (or anything else for that matter, on a computer). These files are <global> on your site. Do not delete any of them
    • js: I've created a Javascript file to make your lives easier. I'll explain in class, but, believe me, it'll simplify your lives. Don't delete this one either I've fixed it so you can't delete it
    • labs: This is where you'll save your lab assignments. I'll be grading them. If they're not there, well, guess what your grade's gonna be
    • midterm: This is where you'll upload the coding part of your midterm exam. See 'labs' above for my admonition
    • project: This is where you'll save your project files. I'm working on reworking the project specifications for this class, so more on that later. We've changed the project specs, so the project folder is no longer needed. You can always make one, should the need arise
  2. IMPORTANT! Most of you are probably familiar with the Windows operating system. Here's the thing: Windows is not case-sensitive. It makes no difference to Windows if a file is named index.html or INDEX.HTML or InDeX.HtMl or INDEX.html or whatever. BUT your web server is running on Linux, which is a different operating system. Linux cares very much about letter case. So all of the above examples would be regarded by Linux as different files. So in this class, we'll name all of our files in all lowercase letters. And without spaces in their names. See this best practices video for more information. [If you're wondering about all the red text...that's my version of shouting on a web page]
  3. In the left pane of FZ, navigate to your external drive in the folders pane. Locate your new hello.html file. Click on it and, while holding the left mouse button down, drag it to the right into your 'server' pane. Then release the mouse button. If you didn't already know, we nerds call this 'drag-and-drop.' This will make FZ upload the file to the server. Make sure you 'drop' it into whitespace, that none of the folders on the right are highlighted. That way, you'll be placing the file into the root folder of your website....we'll talk about that. Extensively
Finding the file you want to upload
Finding the file you want to upload
  1. Now, right-click on hello.html on the right side of the display (where you just uploaded it). Click on 'Copy URL(s) to clipboard'
Copying page's URL to the clipboard
Copying page's URL to the clipboard
  1. Return to Chrome. Right-click in the address bar and select 'Paste' (not 'Paste and Go')
  2. Here's where it gets a little tricky. I guess since FZ is a FTP client, it thinks you want the FTP URL when you really want the hypertext transfer protocol (HTTP) URL. So delete the ftp:// part entirely. Then change the '@' to a dot (.)
Modify the URL from FZ
Modify the URL from FZ
  1. Press 'Enter' and víóla! You're now looking at your web page from the server, not locally
Hello World!
Hello World!
  1. Highlight the URL in the browser's address bar. Right-click on it and select 'Copy'
  2. Return to Brackets and click on the 'New File' button (or click File ⇒ New). Right-click in the editing window and select 'Paste'
  3. The end result should look something like this:
Pasted URL
Pasted URL
  1. Click on the 'Save' button and save your file as lab0.txt
  2. Log in to D2L and select our class. Go to the Dropbox folder
  3. Upload lab0.txt (not hello.html) to the Lab0 Dropbox folder
  4. That's it for today!
  5. DON'T FORGET YOUR EXTERNAL DRIVE!