Bob's Sample | Bob's Tools Page | Bob's Menus Page | Bob's Real 326 Home

Text Editors: Part II of Bob's sample student Web Production site

If I were a new student in COMS326 Web Production, this new page, "tools.html" is where I would tell visitors about the tools I have been exploring in class: computers, operating systems, network software, editors, etc.

Some of its contents were originally part of the first draft of the "index.html" main page in my folder named "coms326," and now the two pages are linked together in the menu at the top of both. (See Bob's Sample in the menu? That's the index.html page in this folder. Every folder usually has its own main page called index.html.)

In its simplest form, your tools page should show that you have used more than one computer and program, by showing a picture of a text-editing session on the Unix server. You also might demonstrate a Macintosh or Windows text editor; and just having the screen-capture there shows that you've been using Photoshop to prepare images for the Web. Your page also should have some text explaining what the images show you are learning. If you have a lot to say and demonstrate, you can have more than one Tools page and link them together.

PuTTY

The picture above shows a "PuTTY" connection to a Web server, where I am editing an HTML page using a program called PICO. That's what the "Tools" topic is about -- the programs and techniques you and I are learning to use to build Web pages.

You might put some of this in your own words, depending on which tools you have used, and enter it as text-captions under the appropriate screen captures:

TextEdit is a plain-text editor on the Macintosh. Notepad is a plain-text editor on the Microsoft Windows system. Terminal on the Macintosh allows you to run SSH to log-in on the university's Unix server. PuTTY is a secure terminal program for Windows. Both approaches allow you to run Unix command-line programs, including plain-text editors like Pico and Vim. Pico is what we call a "keyboard-oriented" editor using control keys, rather than the mouse-and-menus editors common on Windows and the Macintosh OS-X. You can find out more about any of these programs on Wikipedia and elsewhere on the Web.

If you are a computer programming major with lots of experience using other software, tell about it here. If you have other websites or blogs, you could link to them and say something about them.

PICO

Here's a similar editing session, using the Macintosh Terminal to access the server and run PICO:

If I included a "Tools" section as part of my course home page, by the third week of class the page would be getting crowded. Then it would be time to break the content into two pages -- the "index.html" home page with general information about my goals for this course, and a "tools.html" page with screen captures showing the programs I'm using, plus some notes on my learning process.

And that is what I've done here. This page was once part of the index.html page, but it is now a second page named "tools.html" -- and I've made a simple menu at the top of the page to connect to the original page and to a third one. I've altered the titles of the pages accordingly. Notice that on this page the menu word Tools is not a link, because that's the page you are already on.

And, of course, you can change this page any time during the semester. Add new HTML techniques as you learn them.

For a simple page like this, it's OK to put images in the same directory as the page that will show them. For a bigger site, you might want an extra folder named "images."

This page should have screen images to show your accomplishment of basic tasks in the class. If you have made a page using a Terminal program or PuTTY with the ruacad server and Pico editor, you can add those to a list of "Tools I've Been Using." You also can make a list of links to resources about those tools, like this:

As you do some editing with Notepad on a PC, with TextEdit on a Mac, or with Dreamweaver, add them to your "Tools" lists -- and take pictures to show that you are becoming an expert on all of them!

For example, the Unix ruacad-login image below shows that I am using Unix, running the Macintosh "Terminal" program and connecting to "ruacad" at Radford... The session I captured lists some useful Unix commands, so I kept the image big enough to make the type readable. (Four similar-size images would be a very symmetrical way to show that I had used four different editors. Or I might get very fancy and use Photoshop to make the images overlap like a Poker hand. See this seven-in-one image example.)

The size of the image below is for your benefit. Your own screen images don't have to be that big. The first one just has to be big enough to show you have successfully logged in on a Unix computer to do some of your work. You could capture a part of your screen that shows the PuTTY icon and part of the editing window with your name on it. Later,you can capture another image that shows you using Notepad on the PC, TextEdit on the Macintosh, the MyRU "My Files" interface and other parts of the process of building a Web site.

Macintosh and Unix

In Young 123 or Porterfield 173, try the Macintosh's "Terminal" program to login to ruacad and run PICO from there, something like the way you did from Windows with PuTTY.

An advantage of PuTTy is that the SSH protocol is built in, so you don't have to type the "SSH" command yourself the way you do on a Mac.

One advantage of the OS-X Terminal over PuTTY is that it makes changing the screen fonts and colors easier. With PuTTY I discovered that you have to enter color-selection numbers that are just so complicated that I decided to stick with black-and-white. With the Macintosh, you just open a Shell -- New Window from the menu and pick your favorite color scheme. I like "Red Sands."

color-shell menu in Terminal on OS-X


My (your) first Unix commands

vt100
-- As you login on the server you should set the terminal type to one of several types of terminal that can run the "pico" full-screen editor. Notice that when I connect using my Macintosh terminal in the image above the session begins "using dumb terminal settings." Before I start the "pico" text editor, I tell the server that I am using a smarter terminal called "VT100," just by typing that name and pressing "Return." You may not have to do that from a PC running PuTTY, but it can't hurt.
(As you login with more recent Radford Unix accounts, the system tells you what kind of terminal you are using. Press "Return" to accept that default terminal. If the system gives you an error message when you try to run Pico, type VT100 and try again.)
mkdir directorynamehere
-- short for "make directory" -- the same as creating a new folder in Windows or Mac OS-X. Type mkdir plus the name you want to give the directory (in lower case, with no spaces).
ls
-- list files and directories
ls -l
-- list, but a longer version showing file sizes, permissions granted, etc.
cd directorynamehere
-- change directory, followed by directory name and the "return" key (cd public_html). You can "cd" into any directory within the current directory.
cd ..
-- The two dots mean "go up a level in the directory tree"; so if you are working in your coms326/midterm folder and want to go back to the coms326 folder, type "cd .."
pico filenamehere
-- run the text editor "pico" and create (or edit) the document named. If you type "pico" without a name, you will be asked to name the document when you exit the program or press control-O to "writeOut" (save) the document.
exit
Log out of ruacad, or log out of the Macintosh terminal program

My related pages

Bob's real 326 site, http://www.radford.edu/rstepno/326 -- Notice that link is to just "rstepno/326", while the page you are reading is in the folder "rstepno/coms326", to demonstrate the folder name I want students to use for their pages in this class.

(All of my courses are in Communication and Media Studies -- coms, so I don't bother putting that prefix on my folder names. Since students have courses in many departments, I suggest they make folders including the department, school, or program names -- ENGL101, COMS104, etc.)

A menu-style list of some of my other sites:

Bob's Blog | Bob's Home | Bob's Newspaper Heroes on the Air site | Bob's other blog