CPSC 120, Fall 2014
Lab 4: Komodo Edit

This lab introduces you to Komodo Edit, a sophisticated editor for web site development that you will probably greatly prefer to gedit. As part of the lab, you will start work on your web portfolio. The only assignment is that you should have a file named index.html in your www folder that will serve as the front page of your web portfolio, as discussed below. That work is due before the start of next week's lab.

Your "slideshow" web page for Lab 3 is due at the end of class. You might want to spend part of the class working on it in Komodo Edit. The web page should be in the folder named lab3 inside your www folder.

Using Komodo Edit

Komodo Edit is one of several free web site development environments. It is available on the Linux computers in Gulick and Lansing, and you might want to download it for use on your own computer. You can get it from

http://www.activestate.com/komodo-edit/downloads

(If you don't use this link, make sure that you are downloading Komodo Edit and not Komodo IDE. Komodo IDE is a more capable commercial version, which can be downloaded for a 30-day trial, but it will expire after 30 days.)

Important Note: Because of the peculiarities of the network file system that we use, your Komodo preferences and history cannot be stored in your home directory. Instead, they are stored in a "temp" directory on the particular computer that you are using. It is likely that if you come back to the same computer, your preferences will still be there (although even that is not guaranteed). However, if you work on a different computer, your preferences from the previous computer won't carry over.

You can find Komodo Edit in the "Programming" section of the Start menu. Start it up now. It will take a few seconds for the window to appear. You will see a "Start Page" until you start editing a file. Before you start working, there is one preference that I suggest should be changed: Open the Preferences window (from the "Edit" menu). Click the little triangle next to "Editor", then click "Indentation". Change the setting of "Auto-indent style" from "Use Smart Indent" to "Indent to first non-empty column", as shown here:

Without this change, as you type, Komodo Edit will insert too much extra indentation for my taste. You might want to explore some of the other Preference and View options later, when you have time.

One way to create a new file is to use a template, which can already include some of the code that you need. To start editing an HTML 5 file, for example, go to "New" under "File" and select the template named "HTML 5.html":

You will see that the new file has the basic structure of an HTML document. Komodo Edit has several features to help you write HTML, CSS, and JavaScript code. Most important is AutoComplete. As you type, the editor will often pop up a list of possible completions for what you are typing. You can ignore it, or press ESC to dismiss it, but if you want to select an option from the list, you can use the mouse to select an item, or you can use arrow keys to move through the list. Press Tab or Enter to accept the selected item. Also, as you type more characters, items that no longer match will be dropped from the list. This is especially useful for CSS, where AutoComplete can be used for selectors, property names, and property values. Here are two examples:

Furthermore, you can hit Control-Space to invoke AutoComplete. You can do that when you think a pop-up should be available but you aren't seeing one.

(By the way: The CSS in the above picture shows how to center the content of the page and get different backgrounds behind the content and in the margins. The key is to put all the content in a <div>. You can set a background, width or max-width, padding, etc. for the div and then set a different background for the <body>. The same effect is used on this page.)

That is pretty much all you need to know to get started with Komodo Edit. You should experiment with it to see what it can do! And ask questions about anything that confuses you.

When you want to see your work in a web browser, you can save the file and open it in a browser as usual. But you can also open it by clicking the small "world" icon in the Komodo Edit Toolbar. The default is to open the file in a Komodo tab, but you can select a browser instead in the preview dialog:

Here, I've checked "Remember this selection for this file" so that I won't have to see the dialog again.

By the way, if you click the small triangle on the right side of the world icon, you will get a menu of available browsers.)

Starting Your Web Portfolio

Recall (from the syllabus) that part of your grade for the course will be based on your web portfolio. Your portfolio will be a neat presentation of work that you do in the course, including a small final project of your choice. It will be graded at the the end of the semester, but you should start working on it now, and you should add to it throughout the rest of the semester.

The front page for your portfolio should be a file named index.html in your www folder. Although the format is up to you, I strongly suggest that you put links on that page to all of the work that you want to be part of the portfolio, and that you add some discussion or description of each project. The file named index.html will be the default page for your web site; that is, if someone uses a URL of the form "http://math.hws.edu/~zz9999" with no file name, then the page that they see will be index.html, just as if they had said "http://math.hws.edu/~zz9999/index.html".

You should begin work on your portfolio by creating index.html. You should design and implement an attractive style for it. You should have links to your CSS work from Lab 2 and to your slideshow from Lab 3. You should add some text to the page. A description of the lab work would be a good idea. A general introduction to the portfolio is also desirable.

Your index.html page is the only part of this lab that will be graded. It is due at the beginning of class next Friday.

About Komodo Edit Projects

Komodo Edit can treat a group of files as a "project." A project simply consists of all the files in a directory. The project gives you easy access to the files. To create a project, use the "New Project" command in the "Project" menu. Save the new project in the folder that will hold the project's files. A project file with the extension .komodoproject will be created in the folder. You will see the contents of the project on the left edge of the Komodo window, and you can open a file by double-clicking its name in that list.

You might want to make your whole www folder into a project. Just create a new project and save it into your www folder.

If you want to open a previously created project, use the "Open Project" command in the "Project" menu, and open the .komodoproject file from the project folder.

Working from Home

As noted above, you can download Komodo Edit to use on your own computer. It's possible to transfer files back and forth between your computer and your Linux account, but Komodo Edit has a nifty feature that let's you directly edit a file from your Linux account in the Komodo Edit on your own computer. This is called editing a "remote file." (Of course, your computer has to be connected to the Internet.)

(Note: Do not do this on the lab computers in the Gulick or Lansing; this is something that you can do on your own computer.)

To edit a file from your Linux account, just use the "Open" / "Remote File" command in the Komodo "File" menu. An open dialog will pop up. The first time you do this, you will need to enter some information for your account. Click the small Accounts button next to the "Server" input box in the dialog, as shown in the picture at the right. A preferences dialog will open to the "Server" section. You should fill it out as shown here (using your own user name, not zz9999, of course):

Note that you must change the "Server type" to SFTP. The "Hostname" is math.hws.edu. Using /home/username/www as the "Default path" means that the first set of files that you see will be the files in your www folder. The "Name" can be anything; it just identifies the account in Komodo Edit. Click "Add" then "OK".

When you close the account setup, you should be able to choose the new account from the list of "Servers" in the file open dialog. As soon as you do this, you will be asked for your password, and—if everything has been set up correctly—you will be able to select a file from your account. You can open and edit the file as usual. When you save it, it will be saved back into your Linux account. Assuming that it is a file from your www directory, you can see it in a browser using a URL of the form http://math.hws.edu/... as usual.

In addition to being able to open existing files, you can create a new file in your Linux account. Create the file as usual with the "New" command, but when you want to save it, go to the "Save As Other" submenu of the "File" menu, and select "Remote File."