FREC 480 -- publishing GIS projects as web pages

Your FREC480 projects are to be published as web pages suitable for presentation.  For details on how to write web pages, check out Mad Dog's site or another HTML how-to on the web.  I want you to write at least your first couple of projects in raw HTML with Notepad and/or Pico to get the hang of it.  Once you get familiar with the basic coding process, you can switch an HTML editor such as Netscape Composer.  These editors don't always format your pages exactly the way you want, but if you have familiarized yourself with HTML, you will have the skills to tweak the code to get exactly what you want.

The server for your web pages will be UD's "copland" UNIX server.  Use SSH Secure Shell to log into copland.udel.edu using your UD mail login and password.  You will have to familiarize yourself with some basic UNIX commands and concepts in order to create your own website.  I have also created a quick-and-dirty UNIX cheat sheet for later reference.

After you log in to copland, you are looking at a command-line prompt.  You are in your home directory.  Your website will occupy a specially-named sub-directory called "public_html" (including the underscore character), which is probably already created under your home directory.   Type ls at the UNIX prompt to list the home directory's contents. If "public_html" isn't listed, type  mkdir public_html at the UNIX prompt to create it.

This directory must be readable and executable for everyone. Type ls -l at the UNIX prompt to get a detailed directory listing with r, w and x "permissions" shown in the left column. The permissions for your "public_html" directory--and every file or subdirectory you include in it later on--should look like drwxr-xr-x or -rwxr-xr-x.   If they don't, use the chmod (change mode) command chmod 755 public_html to set the appropriate permissions.

Now switch into that directory:  cd public_html

The UNIX Pico text editor is very similar to the Pine email program--simple but doesn't support a mouse.  Basic commands are listed along the bottom of the screen.  Use Pico to start writing a test page:  pico mypage.html

You should see the blank Pico screen with some basic commands on 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 this file as mypage.html, then Ctrl-X to exit Pico.
Now change the file's permissions so it's readable to a web browser:   chmod 755 mypage.html
Now try to access it with a web browser.  The URL will be   http://udel.edu/~yourlogin/mypage.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 message to your mom: "Hi Mom, here's my first web page!"

That's all it takes to create a web page--a plain text editor and some knowledge of HTML format tags. Basic format tags, images, links and other tricks are explained and demonstrated on Mad Dog's website.

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 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 almost impossible to edit.  WordPad files won't work at all because they have weird characters embedded.

Basic protocols

Every web page file name should end with name extension .html.   Filenames should be in lower-case characters only, and should not include space characters or other special characters (but you can use the underscore _ character in lieu of the space character).

To be accessible to a browser, all of your HTML files must be placed in your public_html subdirectory, or a subdirectory of that. For security reasons, browsers are not allowed to access your home directory or other contents of it.

If you get a "Permission denied" or "Forbidden" message when trying to access your web page, your need to set appropriate permissions. Your web directories, HTML files and associated images must be readable by everyone, and directories have to executable by everyone too (chmod 755 dirname); just be careful not to give write permission for your files or directories to anyone but yourself.  Use the chmod command with the "*" wildcard character to set blanket permissions for all files and sub-directories in a directory:  chmod 755 *

 How you organize your coursework files within public_html is your business, but life will be much easier if you use informative filenames and put your projects in separate subfolders like proj1 and proj2 for each project.

The home page for each directory should be named "index.html." The client browser will load this page by default when it accesses that directory; otherwise the client will get a listing of all the stuff in your directory and be able to rummage through everything.

Start by creating a home page for yourself in the public_html directory called index.html that links to your various project directories.  Later you will create the project directories, and the first page in each of these directories should be named index.html too.  There is no confusion since these files are in different directories.

So the directory tree for your public_html directory would look something like this: 

                   /home/usra/64/25640:  (your home directory on the server)
                            |   other.stuff, from.other, classes, ...
                            |
                       public_html:    (your home directory for the client browser)
                            |   index.html,
                            |    myphoto.jpg, mydoggie.jpg, ...
                            |
              --------------------------------
              |                    |
             proj1:               proj2:       ...
                  index.html           index.html
                   proj1map1.gif,..     proj2map1.gif,...

Your webpages will be more portable if their image tags and local links reference images and other files by relative path, e.g.,
<IMG SRC="map2.gif"> simply references map2.gif in the same directory.  You can move the webpage file and its associated image together to another directory and the webpage will still display the image.  But if your webpage's image tags have absolute paths like <IMG SRC="~fubar/proj2/map2.gif"> the server will not be able to find the image if it is moved elsewhere.

Check how your page displays in various browsers--Internet Explorer, Firefox--and how it looks when you resize the browser window.
Image protocols

Your map images should be saved as GIF or PNG files.  These formats avoids the fuzzing that JPEG image compression can cause. 

Before using File--Export Map in ArcMap to save a map image file, you should shape the map frame and zoom so there isn't excess white space.  While exporting, adjust the pixel resolution so you get an appropriately-sized image.  When you resize images after they're created, either with an image editor or simply by specifying enlarged width and height values in the <IMG> tags, they don't often look very good.

Your web pages will look better if your maps have a consistent size and style.  Maps of the same area should have the same dimensions.  Maps of different areas look better displayed side by side if they have the same pixel height. 

You can maintain good control of your webpage layouts by placing maps and associated text in HTML tables.