FREC 480 -- publishing GIS projects as web pages

Writing a test webpage | Text editors | Webpage protocols | Exporting maps for web display

Your FREC480 projects are to be published as a website portfolio on UD's copland.udel.edu UNIX server. Web pages are written with HTML (HyperText Markup Language) tags that are summarized on the quick and dirty HTML reference page and explained in detail on Mad Dog's website.   You may use copland's Pico text editor to create and edit your webpages; alternately, you can use the Notepad text editor on your PC, and then transfer your HTML files to copland. Either way, you will have to learn some basic UNIX. I created a quick and dirty UNIX reference summarizing the most basic commands, and a longer UNIX summary that you can check out later on.

Initial setup

Use SSH Secure Shell to log into copland.udel.edu using your UD mail login and password.  After you log in, you are looking at a command-line prompt.  You are in your home directory.  (In UNIX, you are always "in" some directory; type pwd at the UNIX prompt to see what directory you're in.)

Your website will occupy a specially-named sub-directory (folder) of your home directory called public_html (with the underscore character). Type ls at the UNIX prompt to list the contents of your current directory. You should see public_html listed.

The directory tree structure of your website will be similar to the diagram below.  Each directory (underlined) contains text files, image files, etc.  Only the red portion of the directory tree is accessible to client browsers. 

              /home/usra/64/25640 (your UNIX home directory)
                |             |   other.files, not.web, ...
     otherdirectory           |
more.files, not.web...   public_html (top-level website directory)
                          |       |  index.html (your personal home page), mydoggie.jpg,...       
                          |       |
                   mexicotrip   frec480  
                   drunk.jpg..    |   index.html (your main class page)
                     _____________|_________________________...
                     |                 |               |
                   proj1             proj2           proj3 
                 index.html         index.html      index.html
               grt_lakes.png      epa_sites.png...  dem.png...
                page2.html...
For security reasons, the host server (copland) will not allow client browsers above your public_html directory. Your web stuff must be in your public_html directory or some sub-directory of it, and must have appropriate permissions set.

Type ls -l at the UNIX prompt to get a detailed listing of the current directory's contents, including the permissions. If your login was "fubar" you would see something like this: 

-rw-------  1 fubar   0419    25 Jul  2  2009 mail
drwxr-xr-x  5 fubar   3896  4096 Sep 12  2009 public_html
Look at the first 10 characters. The first character indicates whether it's a file (-) or directory (d). The next 9 characters show three sets of permissions. The file owner fubar's read (r) write (w) and execute (x) permissions are shown in red; a - character indicates a permission that has not been set. Permissions for the owner's UNIX group are shown in black. Permissions for all other users including client browsers are shown in blue.

The permissions for your public_html directory and every subdirectory you include under it should be drwxr--r--.
The permissions for all your web files (HTML docs, images, etc.) should be -rwxr--r--   or   -rwxr-xr-x.
Do not set a write (w) permission for anyone but yourself!

You can set the appropriate permissions with the chmod (change mode) commands: chmod 755 somefile.html sets permissions as -rwxr-xr-x for somefile.html.

Now change directory (cd) to public_html: cd public_html

Writing a test webpage

The UNIX Pico text editor is pretty easy to figure out, but it doesn't support a mouse--you have to use the arrow keys to move around, and [Ctrl]-V and [Ctrl]-Y to page up or down.  Use [Ctrl]-K and [Ctrl]-U to cut and paste lines or blocks of lines. Basic commands are listed along the bottom of the screen. 
Use Pico to start writing a test page:  pico testpage.html

You should see the blank Pico screen with the basic command list at the bottom.   Type these HTML tags and some test message like this: 

<HTML>
 <HEAD></HEAD>
 <BODY> 
        Hi Mom, here's my first webpage!

 </BODY>
</HTML>
[Ctrl]-O and Enter to save ("Write Out") this file, then [Ctrl]-X to exit Pico. You should see the UNIX prompt again.
Set the file's permissions so that it's readable to a web browser:   chmod 755 testpage.html
Now try checking this page out with a web browser.  The URL will be   http://udel.edu/~yourlogin/testpage.html
substituting your own login for yourlogin;  don't forget the ~ character. 
Note that you don't include public_html in the URL path.  
If you have done everything correctly, you should see the single-line: "Hi Mom, here's my first webpage!"

That's all it takes to create a web page--a plain text editor and some knowledge of HTML format tags. Now try out some of the tags demonstrated in the quick and dirty HTML reference.

Alternative editors

If you prefer, you can write your webpage on your local machine using Notepad (which supports a mouse), and then transfer the file via FTP to your public_html directory.   You can do basic file management within FTP; for example, to set the UNIX read/write/execute permissions on a newly-transferred file simply right-click on its filename and edit its properties. 

Do not use MS-Word or WordPad to write your web pages. 
If you write web pages with MS-Word, saving the document as "Web Page," your files will bloated with horrible code and you will go to hell.  WordPad files won't work at all because they have weird characters embedded.

Basic web protocols

  • Every HTML file should have the filename extension .html.
  • When naming files, it is good practice to use lower-case alpha-numeric characters only. Filenames should not include spaces or other special characters (but you can use the underscore _ character instead of the space character).
  • All of your website files must be placed in your public_html subdirectory, or a subdirectory of that.
  • Set all the read permissions for your HTML files and associated image files.
    A "Forbidden" or "Permission Denied" browser message means you have not set a read permission:
    chmod 755 (readable and executable) for subdirectories, chmod 744 (readable) for files.
    You can use the chmod command with the "*" wildcard character to set blanket permissions for all files and sub-directories in the current directory, e.g.: chmod 755 *
  • Each directory in your website should have a front page named index.html that loads by default when a client browser accesses the directory. Otherwise people accessing your directory will just see a list of all your files and think you're a pathetic dweeb. (Don't confuse the directory named public_html with files named index.html.)
  • Use HTML tables to control the placements of your map images and text.
    Only three types of HTML tag are needed:
    A table starts with a <TABLE> tag and ends with a </TABLE> tag.
    Each table row starts with a <TR> tag and ends with a </TR> tag.
    Each table data cell in a row starts with a <TD> tag; the ending </TD> tag is recommended but not necessary.
  • Each class project should occupy a separate subdirectory: proj1, proj2, ....
  • Don't create over-wide images that require horizontal scrolling, or excessively long webpages that require lots of scrolling down; it's better to use links to connect a series of shorter pages. Try to put the best stuff "above the fold" in the first screenful.
Exporting map images for web display

Before using File--Export Map to export your ArcMap map frame as image file, minimize the white space around it. Zoom the map and re-size the ArcMap window if necessary. To export a series of maps with the same size and aspect ratio, keep the same window size and export all your maps with the same image resolution. Your web pages will look a lot better if your map images have a consistent size and style. Avoid creating images wider than 900 pixels.

Arc's File--Export Map sets the size of the image via the resolution you specify, generally 72 pixels per inch. It's best to export the right size image, but if your exported images are too big, you can always crop and resize (and sharpen, adjust brightness and contrast, make the background transparent, etc.) them with Gimp. (Always edit in RGB mode!). If your exported images are too small, you can enlarge them somewhat with Gimp, but you will lose image quality. It's usually better to re-export larger versions.

Export your map images as GIF or PNG files.  If you run low on disk quota, you can reduce image file sizes by converting to JPEG (JPG) format, but avoid high JPG compression levels that can smear your map details. The JPG format is best for photos.

Troubleshooting

Managing your website with UNIX and a primitive text editor can be frustrating until you get used to this environment. The most common mistakes that novices make are:

  • losing track of what UNIX directory you're working in. Use the "pwd" command to check. Students sometimes create web pages in their UNIX home directories, which browsers cannot access.
  • forgetting to set file and directory permissions, so you see "Denied" or little dead image icons. Use "chmod 755" or set the correct Properties in the FTP window.
  • typos, incorrect case, omitted quotes, etc.  HTML itself is not case-sensitive, but the filenames you reference are. The simple image tag meant to display the file "mydoggie.JPG" -- <IMG SCR="mydoggie.jpg> -- has 3 errors--see if you can spot them! Mistakes like these can mess up your whole webpage.