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]
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.
Double-click on the Brackets icon on your desktop display to launch it
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.)
Note the tools and menu items that are identified. You'll use them the most
Click File -> New. Notice that a new file tab opens up, named 'Untitled-1'
Click on the editing area (the white area in the middle), and enter
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
If you brought a flash drive, insert it in a USB port
Click the 'Save' button on the tool bar. Click 'My Computer' (or whatever your PC is named) on the left (1, below)
Locate your flash drive and double-click on it
The display will look a little like the picture below (probably not as busy, but something like it)
Enter hello.html into the File name field and click 'Save'
After the file's saved, click the 'Live Preview' button on the right
Víóla! You made a web page
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]
Connect to the server with FileZilla
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
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)
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
Here are the most important things to understand about FZ:
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!
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
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
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]
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
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'
Return to Chrome. Right-click in the address bar and select 'Paste' (not 'Paste and Go')
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 (.)
Press 'Enter' and víóla! You're now looking at your web page from the server, not locally
Highlight the URL in the browser's address bar. Right-click on it and select 'Copy'
Return to Brackets and click on the 'New File' button (or click File ⇒ New). Right-click in the editing window and select 'Paste'
The end result should look something like this:
Click on the 'Save' button and save your file as lab0.txt
Log in to D2L and select our class. Go to the Dropbox folder
Upload lab0.txt (not hello.html) to the Lab0 Dropbox folder