SSH

We will access the server via the SSH, or “Secure SHell”, protocol. SSH provides encrypted communication between two terminals. It is an alternative to telnet or rlogin.

First, make sure that you have an SSH client. If you are running Windows, I highly recommend downloading Putty. Click on the top Windows binary and save it to the desktop. You can run Putty.exe directly, without installing.

If you are using OS X, open a terminal and run ’ssh’.

Logging In

Type your hostname into the box. You can find your hostname by asking your ISP, but a good bet is that “www.yourdomain.com” will resolve to your server. You may need to request shell access

Click open. You’ll be presented with a warning, because you haven’t connected to that machine before. Approve the connection.

Next, you’ll see a login prompt. Enter your username. These will be assigned in class, but a good guess is your first initial and last name.

Enter your password. Both your username and password are case-sensitive.

You should see a screen like the one to the left. Congratulations! You’re logged into the system.

The Prompt

You’re now looking at an interactive shell prompt. The shell accepts the commands that you type and sends them to the kernel, which executes them. This is how you interact with the operating system.

The prompt currently shows your username, the name of the machine (PVDACDLN-01), and your current directory (~, see below).

By default, our system assigns users to the bash shell. There are many different shells available. In general, they all do the same thing, so most users choose a shell based on what they are most comfortable with.

Tip: By default, OS X uses bash as the shell in a terminal. All of these commands will work nearly identically in OS X.

Commands

The remainder of this document is an introduction to Linux commands and a reference.

The Filesystem

The Linux filesystem is organized into a heirarchical series of folders, or directories. ‘/’ indicates the root directory, which contains all other files and directories.

pwd – pwd stands for “print working directory”. It echoes the current directory to the screen (this is where, in the filesystem, you currently are).

cd – cd stands for “change directory”. It changes your current working directory to a new directory. If you try to change to a directory that does not exist, you’ll get a No such file or directory error.

Tip: you can type “cd ~” at any time to return to your home directory, or, if you know someone’s username, type “cd ~username” to cd to their home directory.

ls – ls stands for “list”. It prints a list of files and directories in the current working directory to the screen. This version of ls presents directories in blue.

The ls command also accepts various arguments that change the output of the command. For example, the “-a” argument means “display hidden files”, while the “-l” argument means “use long listings”. Command-line switches can be used singly or combined.

Filenames that begin with a “.” are hidden by default. Also note the “.” (current directory) and “..” (parent directory) operators.

clear – The clear command requires no parameters. It clears the terminal and presents a prompt. It’s almost never necessary to do this, but it can be good for mental clarity.

Information

who – The who command requires no parameters. It prints a list of all logged in users to the screen.

top – every program or command that runs on the machine is a process. The top command displays running processes in order of the CPU cycles consumed.

ps – ps stands for “process snapshot”. It prints a list of the current running processes. Use the “-e” argument to see everyone’s processes.

man – man stands for “manual”. It accepts one command name as a parameter. It will less the man page for that command. Use the spacebar to page through it, or type ‘q’ to quit. Try typing ‘man ls‘.

Man pages are generally dense and occassionally uncomprehensible, but they do usually present every possible option for a command.

help – help is a bash command that provides help for builtin commands. It accepts a command name or pattern (partial name) as an argument.

Unfortunately, help only documents certain commands. Try ‘help help‘.

Manipulating Files and Directories

cp – the cp command accepts two parameters. It copies a file to a file with the name specified in the second parameter. Each parameter may include a directory (relative or absolute) and a filename.

Use the -R (recursive) switch to copy entire directories.

mv – the mv, or “move” command, accepts two parameters. It renames the first file to the second filename. Each parameter may include a directory (relative or absolute) and a filename.

The mv command is also used for renaming files.

rm – the rm, or “remove” command, deletes a file.

Resources and Help

Explore these links for additional information and explanations.

• Learning the shell
• Bash command reference
• Unix tutorial for beginners

Introduction

Swapping new images into an established layout is one trick that can keep a site design fresh. Some examples:

• gettyimages
• benstraw

There are several different techniques for accomplishing this effect. A server-side program is the best approach, because you can automatically pull files from a whole directory (eliminating the need to modify code), and it will work even if a user has JavaScript disabled.

Unfortunately, not everyone has access to a host that supports server-side scripting. That’s okay, because the same thing can be accomplished with client-side code in JavaScript. I’ll show you how, with three JavaScript functions of varying levels of ease and functionality. First, gather two or more images that are the same size. Then read on…

Setup

Click here to see the script run. Reload a few times (you may need to right-click and choose ‘reload’). Then view the page source.

This HTML is simple (and valid)!

The onload event of the body tag calls the rotating image function. The image tag should be positioned on the page as normal. The width and height are the same as the width and height of the images.

Basic Function

This is the most basic and straightforward implementation. Name your images incremental filenames, like ‘rose1.jpg’, ‘rose2.jpg’, etc. Then use the following function to load them dynamically:


function selectPicBasic() {
// generate a random number between 1 and 3
var randomNum = Math.floor(Math.random() * 3)+1;
// build the filename string including the random num
var filename = "rose" + randomNum + ".jpg";
// set the src of the image equal to the filename
document.getElementById("pic").src = filename;
}


This function generates a random number from 1 to 3 (to refer to images ‘rose1.jpg’, ‘rose2.jpg’, and ‘rose3.jpg’). It builds the filename string piece by piece, using the concatenation operator (+). Finally, it gets a pointer to the image element in the body of the document via the tag’s id attribute, and sets the src attribute of the image element to the new, randomly generated filename.

This works for simple cases, but it does have some serious drawbacks; you need to modify two of the three lines of the function to update it, and it only supports filenames that follow the roseX.jpg pattern.

Better Function

This function expands the previous one and fixes those issues.


function selectPicBetter() {
// create an array of all possible images
var picArray = new Array('rose1.jpg','rose2.jpg','rose3.jpg');
// select a random num between 0 and length of the array
var randomNum = Math.floor(Math.random() * picArray.length);
// assign a random array entry to the src of the image
document.getElementById("pic").src = picArray[randomNum];
}


This function uses an array to store a set of filenames. It generates a random number between zero (the first index of the array) and the length of the array, and sets the src attribute of the image to that entry in the array. To add more files to the rotation, just add them to the array.

Cowboy Function

This is the version written just because it can be. It’s a rewrite of the basic function, in one line.


function selectPicCowboy() {
document.getElementById("pic").src="rose"+(Math.floor(Math.random()*3)+1)+".jpg";
}


Don’t do this. Unless you’re a cowboy.

Conclusion

If you’re limited to client-side coding, the selectPicBetter() function is a decent, quick, and clear approach to incorporating rotating images into your site.

Please learn from this code, but if you use it, I appreciate attribution!