University of Minnesota Duluth
 
 
Search | People | Departments
Information Technology Systems and Services.
ITSS home

ITSS WebDev Guide

Creating your site

This section covers topics on basic web site development, including information on editing, using the UMD templates, and uploading your files to the UMD web server.

Creating / editing your site

There are a variety of options available for creating and editing your web pages.

Using the UMD templates & style sheets

More Info

Templates allow users to easily create a series of web pages with a similar format. Templates and style sheets with the standard UMD design are available for all departments to use. The UMD templates:

Using the templates will ensure that your web site meets University requirements for branding and accessibility.

Using virtual includes

Virtual includes are another way to provide consistency within a series of pages, as well as make it easier to update the pages. A virtual include is a reference to another html file that is to be "included" when the page is viewed with a browser.

An example of the HTML code for a virtual include is:

<!--#include virtual="/common/html/footer.html"-->

The referenced file ("footer.html") contains the following code:

    <hr>
    The University of Minnesota Duluth is an equal 
    opportunity educator and employer
    <br>
    &copy;2003 University of Minnesota Duluth
    <br>

    Page URL  http://<!--#echo var="server_name"-->
    <!--#echo var="document_URI"-->

By changing the referenced HTML file, all pages with the virtual include are automatically updated.

In the UMD templates, both the header and the footer are set up as virtual includes. This way, if we want to change the information in the footer on each of the UMD pages, we simply change one file (footer.html) and all of the main UMD web pages are automatically updated.

Departments may choose to use virtual includes for their sites as well. For example, all of our ITSS web pages include an additional virtual include for our ITSS header and footer.

Adding a Search box

The University's Google search engine is capable of searching all of the UMD web pages. You can also search for pages in only a specified directory (such as a department web site) if you wish. This is nice since it will return links that are usually more relevant than a page from another department.

These sample forms will help you set up the search form on your web pages.

Designing for mobile devices

Macs and Windows computers; iPads, Nooks, Kindles and Android tablets; iPhones and Android phones: UMD, like the rest of the world, supports a mixture of web devices, operating systems, browsers (Firefox, IE, Opera, Chrome) and screen sizes. To meet these needs, web developers are turning to technigues that promote adaptive or responsive design on their web sites.

ITSS has initiated a pilot project that uses adaptive design to make the UMD web site more usable to mobile devices. Currently, most centrally-managed web pages (those linked directly from the UMD home page) are using this design to provide a more readable display when viewed with a mobile device. We will be including the code in the UMD templates in the near future.

In the meantime, you may wish to review these resources:

Using Google Analytics

Google Analytics is now available as part of the University's Google Apps suite. Use Analytics get insights into how visitors use your site, how they arrived on your site, and how you can keep them coming back.

For details on how to implement and use Analytics, see:

Validating your code & checking your links

Tools

Validating your HTML and CSS coding is the best way to ensure that your web pages work well for all users. There are a number of free online tools to assist in creating and validating web page HTML and CSS code for usability and accessibility. A particulary helpful tool is the Web Developer add-on for Firefox, which allows you to quickly and easily check coding on each page of your site.

A number of online tools are also available to perform link checking on your sites, which can be especially helpful after making a major site update.

A few of the more frequently used tools are listed at right. For a detailed listing of many more tools, see: Web Design References: Tools.

Moving your files to the web

More Info

Many people find it easiest to develop their web pages on a personal computer using a text editor or one of the many web page editor programs now available (such as Dreamweaver). Once your files are ready to go, you'll need to transfer them to the web server and set the correct permissions so the rest of the world can view them.

Many web development programs (including Dreamweaver) have a built-in file transfer process. If the program you use does not include file transfer capability, you will need to use another secure file transfer protocol (sftp) program, such as Filezilla (available for both Windows and Macintosh computers).

If you connect to the Internet through a non-UMD ISP (cable modem, DSL, or other), you will need to install and run the VPN client software before you can transfer files to the UMD web server.

Secure SFTP settings

You will need the following secure file transfer protocol (sftp) settings to upload your files to the UMD web server.

Note: You will need to use the Internet/email (X.500) account and password that ITSS has assigned as the owner of the web site. There is no guest or anonymous ftp access to our web server.

Secure File Transfer Protocol (SFTP) Settings
Department web sites Personal web sites
SFTP Host: www.d.umn.edu www.d.umn.edu
Host Directory: /web/your_department_directory/

(for example: /web/itss/)
www/
Login/user: Internet ID that manages the web site

(for example: wwwitss)
Your Internet (email) ID

(for example: breeves)
Password: Password for the Internet ID that manages the web site Your Internet (email) password

Here is an example of how to configure Filezilla (Windows) for SFTP:

Filezilla SFTP settings

Here are examples of how to configure several versions of Dreamweaver for SFTP:

Dreamweaver SFTP settings

Dreamweaver SFTP settings

For detailed instructions, see: Using SFTP in Dreamweaver CS5.

Creating a redirection for your site

Shortcut URLs:

Want a shorter URL than the one you have? Try the U's website shortener program and retain the .umn.edu tag: z.umn.edu.

There are times when you may wish to redirect a web browser from one site to another, for example, if you move your web site to a new URL. Following are three ways to achieve this for individual sites. If you need to redirect an entire site, please contact the ITSS HelpDesk for assistance.

Create an index.php file

This is the simplest method. Create a one line index.php file in the old directory (URL) that points to the new URL.

  1. Create a new file called "index.php" in the old directory (this will replace your current index.html file).
  2. Add the following line to the file:
    <?php Header ("Location: http://your-new-url-here"); ?>

For example:

<?php Header ("Location: https://sites.google.com/a/d.umn.edu/Me/"); ?>

Create an .htaccess file

Another way is to create an ".htaccess" file in the old directory (URL) that points to the new URL.

  1. Create a new file called ".htaccess" in the old directory (where your current index.html file resides).
  2. Add the following line to the file:
    Redirect /your-dir/your-old.html http://new.html

For example:

Redirect /~jdoe/index.html https://sites.google.com/a/d.umn.edu/JohnDoe/

Using symbolic links

Symbolic links are handy for some special situations. They can be nice since the person browsing your site will not know that where they think a file is, and where it actually is, are two different places. A symbolic link should not be confused with an HTML link, they are completely different. You could think of them more as a pointer or a Shortcut (Windows) or an Alias (Macintosh).

If you want to see a symbolic link in action, follow this link and then try to notice a difference other than the URL. There is no difference because the symbolic_link.html is actually a symbolic link that points to this file symbolic.html. To do this, I had to follow these steps.

  1. Telnet to the web server (www.d.umn.edu)
  2. Get to the unix prompt
  3. Change to the directory containing the file symbolic.html
  4. Type this:
    ln -s symbolic.html symbolic_link.html

The UNIX command is ln which means link. The -s tells the link command that link to be made is symbolic. You will notice in the example above that the file to be "linked" to is listed first, then the name of the "link" is listed.

Rev: 02.06.13 sab

© 2014 University of Minnesota Duluth
The University of Minnesota is an equal opportunity educator and employer.
Last modified on 02/06/13 11:11 AM
University of Minnesota Campuses
Crookston | Duluth | Morris
Rochester | Twin Cities | Other Locations