PLNT4610/PLNT7690 Bioinformatics
Lecture 2, part 3 of 3

C. Tips for creating and editing readable web pages

Although many web developers directly edit HTML code, there are also graphical HTML editors that make creating web pages as easy as writing a document.

In particular, the Mozilla Seamonkey web browser comes with a Composer, which we already used in the previous section.
http://www.mozilla.org/projects/seamonkey/. It is probably the easiest way to make web pages.

Tutorials on Creating Web pages using Seamonkey Composer

Creating Web Pages (Clemson University)

1. Visual organization

Perhaps the most important point in creating web content is that the visual layout should help the viewer understand the organization of topics.

Use visual components that catch the eye, such as large main headings and smaller subheadings. Make headings a different color than text. Bullet points and indentation also help to show how the information is organized.

2. Capturing and creating graphics

Images can be saved from remote Web pages, or captured directly from the screen. Most web browsers can display images from files in PNG (*.png), GIF (*.gif) or JPEG (.jpg) formats.

Saving images from Web sites
Any image on any Web page can be saved from Seamonkey by mousing over the image, holding down the right mouse button and choosing Save Image As. Images should be cited by the URL from which they were taken.

Embedding images from web sites
Almost any image from a remote web site can be displayed directly on your web page without the need to click on a link. In Seamonkey, when you insert an image, normally do so in the Image Properties menu, in which you choose an image file to include from the directory in which your web page is located. However, any URL can be pasted into the Image Location field in the Image Properties menu. The important point is that the URL must go directly to the image, rather than a page on which the image is displayed.
Capturing images from the screen
Any window, rectangular area, or full screen can be captured using 'xv', the Screenshot Tool, or in gimp, both of which can be launched at the command line or from the Graphics section of the Launch menu. All of these programs can directly save files in formats such as PNG (.png) GIF (.gif) JPEG (.jpg),and TIFF (.tif). Other formats are available, but GIF, JPEG and PNG files are usually the smallest and most universally-read formats.

Draw your own figures Several programs exist for drawing figures, which can be launched from the Graphics section of the workspace menu, or by typing their names at the command line: 'tgif' as well as OpenOfice/LibreOffice Draw. tgif is especially convenient for making quick diagrams. It produces files in several formats including PNG, GIF, JPG, and TIFF.

Hint: Keep graphics files small
The more detail, the bigger the file. Large files take a long time to download. TIF files tend to be much larger than GIF or JPEG.

Upload images from a PC
Images from a PC can be uploaded to your Unix account using FTP (File Transfer Protocol). One of the most comprehensive FTP programs is Filezilla (http://www.sourceforge.net/projects/filezilla).

3. Text and images must be readable by people in the back of the room

Putting up text and graphics that your viewers can't see or read accomplishes nothing. Again, make sure headings, subheadings, and tables are readable on the screen. For some reason, the Ariel/Helvetica family of fonts seem to be more readable, from a distance, than fonts such as Times.

Another consideration is contrast. Text should contrast strongly with the background. Although it may look cool, a dark blue text against a black background is virtually unreadable. Use bright text against a dark background, or dark text against a bright background.

dark text, dark background	dark text, bright background	bright text, dark background	bright text, bright background
You can barely read this.	This is best both for viewing and printing.	This looks great on the screen or monitor, but is not so good for printing.	This isn't very good either.

4. Keeping text with graphics

When you want to keep a block of text with a graphic image, it is best to embed both in a table. For example, the text in this paragraph, and the window to the right, are in separate columns of a table with 1 row. The Insert Table window shown is the actual window used to create this table, in the web page you are reading now.

Usually, a table with 1 row and 2 columns works well. If you set the border to 0 pixels, it will not even look like a table, but rather, like an image that is set to wrap text to the left.

Notice that you can even insert a caption by inserting text below the image.

Settings for creating a table that keeps text with graphics.

Q: When I look at my web page in the web browser, the image doesn't appear. Instead there is an empty box.

A: In the SeaMonkey Composer, double click on the image, which will bring up and Image Properties window for your image. Under the heading Image Location you can see the URL for the image. It is possible that the name was spelled incorrectly. But another possibility is that SeaMonkey inserted a fully qualified file path to the file, rather than just the name of the file:
WRONG: file:///home/plants/frist/courses/bioinformatics/lec02/mozilla.insert_table.png
RIGHT: mozilla.insert_table.png

The fully qualified path will only work if you open the HTML file using File --> Open. When you navigate to the page through the web server, there will be no file at that exact file path, so you get a file not found error.

5. Relative links versus absolute links

There are two kinds of hypertext links:

absolute (external) link - a fully-qualified URL, consisting of a domain name, path and filename. For example, the absolute link for this file is http://home.cc.umanitoba.ca/~frist/PLNT4610/lec02/lec02.3.html
relative (internal) link - a link pointing to an HTML file, whose path is relative to the current directory. For example, this page is lec02.3.html. A relative link to the previous page would be lec02.2.html. We don't need to include any web server or path components, because both files are in the same directory.

Wherever possible, use relative links. This is important, because at a later time you may reorganize your directory structure, or even copy and re-use web directories for other purposes. Relative links should not need to be changed, in most cases. Usually, the only time you need absolute links is for pointing to external web sites.

6. Organize your web files in a hierarchical directory tree

Organization is everything. Your web files should be organized in a directory tree that reflects the relationships between web pages. Often, there is a master page which has links to many other pages. The master page would be in a high-level directory, and there would be a subdirectory for each of the other pages. Most importantly, all graphics files for a given page are kept in the same directory as the page that displays them. This means that you can use relative links for everything, and that the relative links will only need the filename, and no path.

The PLNT4610 directory, shown at the beginning of section C, illustrates this point.

7. Use fixed fonts for program output

Many programs generate output that only makes sense with a fixed font. Most fonts commonly-seen in documents are proportional fonts, meaning that narrow letters such as 'i' or 'l' take up very little width, whereas wide letters such as 'O' take up more space. In fixed fonts, all letter and numbers take up exactly the same width on a line of text. For example, output from the BACHREST program, listing restriction cutting sites and restriction fragments for a sequence cut with the enzyme AcoI, are shown in both fixed and proportional fonts. Make sure that when output is shown on a web page, it is in a fixed font.

fixed font

                                         # of
Enzyme          Recognition Sequence     Sites     Sites   Frags   Begin     End
------------------------------------------------------------------------------
AcoI            Y^CCGGR                      3
                                                    1289    2817    2533    5349
                                                    1556    1288       1    1288
                                                    2533     977    1556    2532
                                                             267    1289    1555

proportional font

AcoI            Y^CCGGR                      3
                                                    1289    2817    2533    5349
                                                    1556    1288       1    1288
                                                    2533     977    1556    2532
                                                             267    1289    1555

Most fonts are proportional, eg. Helvetica, Times.

Examples of fixed fonts include Courier, Lucida typewriter and Terminal.

D. Remote connection to your Linux account

1. Remote text-based connection - ssh

Public key encryption
Public key encryption is a mechanism for sending messages that can only be encrypted by the recipient, and no one else. A pair of numbers, called a Public Key and a Private Key, can be generated using one of several methods. The most important point is that any message encrypted using the Public Key can only be decrypted using the Private Key. To make it possible for others to send you encrypted messages, you make your Public Key available, for example, on your web site. However, your Private Key is kept secret.

For example, if Bob wants to send Alice an encrypted message, he reads Alice's Public Key and encrypts the message. Next, he sends the encrypted message to Alice, who can decode it using her Private Key. Even if the encrypted message is intercepted by someone else, they can not read it.

For more on Public key encryption see http://en.wikipedia.org/wiki/Public-key_cryptography

SSH - secure shell
SSH is a program that uses public key encryption to let you run a text-based session on a remote server. SSH automatically generates a Public Key/Private Key pair, so the user doesn't have to know how to do that.

There are actually three related programs:

Program	Function
ssh	run a remote shell
scp	copy files to remote server
sftp	transfer files to remote server

Connecting to Linux from another machine

All of the desktop operating systems (Windows, Mac, Linux) have a terminal program that lets you run a command line session on a remote host. To connect a U. of M. Linux host eg. venus, from any computer type:

ssh userid@hostname.cc.umanitoba.ca

where userid is your unix userid and hostname is the name of the host. You will be prompted for you Unix password. If the password is correct, you will see the command line prompt appear. When you are done, simply type 'logout' to end your session.

For example, to connect to venus, type

ssh userid@venus.cc.umanitoba.ca

As of Windows 10, the Windows SuperShell now has an ssh command as well.
https://www.howtogeek.com/336775/how-to-enable-and-use-windows-10s-built-in-ssh-commands/

Alternatively, Windows users can download Putty, a program that will run a terminal session. See Running a comandline session from a Windows PC

Mac users can run ssh in the terminal app.

Unless otherwise cited or referenced, all content on this page is licensed under the Creative Commons License Attribution Share-Alike 2.5 Canada

previous page PLNT4610/PLNT7690 Bioinformatics
Lecture 2, part 3 of 3
next page