Vous êtes sur la page 1sur 35

Information Technology

Web Content Managers


Handbook

Web Content
Managers
Handbook

Produced by
Montgomery College’s
Web Application Group
(WAG)
Last updated 5/4/2006

http://www.mcinfonet.org/webinfo/
TABLE OF CONTENTS
The Web Content Managers Handbook …………………………... 2

Web Application Group ……………………………………………… 2

Handbook Overview ...…..…………………………………………... 3

Two Web Publishing Options: 1 or 2 ……………………………… 4

How to Obtain An Account For Your Department or Yourself .. 6

Ipswitch WS_FTP Home (software) enables users to transfer


files between the remote servers’ and local computer 7
………………….…………….

Steps to Back-up and Update Web Pages ……...………………… 10

Microsoft FrontPage 2000 …..……………………………………….. 14

A-Prompt (software) is a program designed to improve web 19


site accessibility for people with various disabilities ……………

Contact Information ……………………………………………......….. 33

http://www.montgomerycollege.edu/webinfo/ 2
Web Content Managers Handbook

This handbook is updated and maintained by the Web Application Group. The topics covered in this
handbook are meant to help the user (you) design, publish and view your website.

Web Application Group (WAG)

The Web Application Group provides guidance and support to the College community for the
maintenance and development of the College’s web sites.
Our services include providing web page design, development, implementation and consulting users.
The Web Application Group has developed a website to help the user with their website. The website
is located at http://www.montgomerycollege.edu/webinfo/. Please refer to this site for the following
information –
• Web Accounts – Instructions on how to open an account, fill in the required form, and obtain a
password and user ID <http://www.montgomerycollege.edu/webinfo/obtainaccounts.html>
• Web Tools – Information on Web Page Editors, File Transfer software, and Web Browsers
<http://www.montgomerycollege.edu/webinfo/webtools.html> .
• Web Content Managers Handbook – This document (that you are currently reading) is located
at this site <http://www.montgomerycollege.edu/webinfo/WebUsersHdbk.doc> .
• Web Training – A schedule of Standard Software Training that is currently being offered is listed
<http://www.mcinfonet.org/it/dat/> .
• Web Standards – The Web Standards document that all college web pages are required to
follow is located at this link
<http://www.montgomerycollege.edu/webinfo/standards/index.html> . Also a template to
help the user start a website is provided <http://www.montgomerycollege.edu/template.htm>.
• Web Statistics - Provides a detailed analysis of the college’s website traffic
<http://www.mcinfonet.org/statistics> .

The Web Application Group currently manages four web sites for the College Community.
• The Internet* site is located at: http://www.montgomerycollege.edu , and contains information
and services for the public which are also useful to College employees.
• The Intranet* site is located at: http://www.mcinfonet.org (MCInfonet), and contains
information and services for the operation of the College for internal College communications.
• Our WebCT site is located at: http://webct.montgomerycollege.edu. WebCT is an
e-Learning software platform, or course management system, for delivering Distance Learning
courses via the web. WebCT can also be used to support courses taught on campus.
• Distance Learning Intranet:
http://www.montgomerycollege.edu/distance/internal
• WebCT Training: http://s45.mc.cc.md.us/cp/home/loginf Login to myMC and
choose the 'My Courses' tab. From there, choose the 'DL WebCT' link from the
left hand navigation menu.
http://www.mcinfonet.org/webinfo/
• The Web4students site is located at:
http://web4students.montgomerycollege.edu. Web4students is Web space for students who
are taking courses, which require web development work.
• Faculty Instructions:
http://www.montgomerycollege.edu/webinfo/facultyinstructions.html
• Students Instructions:
http://web4students.montgomerycollege.edu/information/introduction.html

* The Internet site is for external business; the Intranet site is for internal operations.

HANDBOOK OVERVIEW

In order to get started, the next few pages will guide the user through the necessary steps to develop
their website in the college environment.
If additional skills are needed to help develop a website, training is provide through the IT Department
and the link to the current training schedule is provided in this document.
• In the first section Web Publishing options are discussed. The Web Application Group
provides the user two options for creating their website. The Web Application Group can
either assist the user with the initial design and implementation of their site or the user can
design and implement their site. The user is responsible in either option for maintaining their
web site.
• The second section discusses how to obtain a web account. Users will need to open a web
account through the Web Application Group in order to receive a password and User ID for
their website. Department accounts can be obtained for either Montgomerycollege.edu
(Internet) or MCInfonet (Intranet) and Individual accounts can be obtained for
Montgomerycollege.edu (Internet) only. The Web Application Group will provide the user with
a password and User ID after the proper form is completed.
• The third section in this document has complete instructions on the WS_FTP software which
IT recommends for campus PC to log on to the remote server via the Internet, and transfer
files between a remote server and a local computer. This file transfer tool is necessary so
that the user can download files, work on files on your local computer, and then upload files
back again to the remote server, which makes those web pages “live” on the Web. The FTP
software recommended by IT to use for home PC is FileZilla. To install FileZilla software, go
to http://filezilla.sourceforge.net/ and follow the procedures there. There is a FileZilla
Tutorial located at http://www.montgomerycollege.edu/webinfo/filezilla.html. (Please
enter “www.montgomerycollege.edu” for MC Internet or “www.mcinfonet.org” for MC
Intranet as “host”.)
• In the fourth section FrontPage 2000 is discussed. The editing features of the software are
described and items that should and should not be used when developing the website in the
college environment are pointed out.
• Finally, the contact information for the Web Application Group and the IT HelpDesk is
provided.

If you have questions, you can email the Web Application Group at:
webmastr@montgomerycollege.edu or place a work order with the IT HelpDesk at (301) 251-7222.

http://www.montgomerycollege.edu/webinfo/ 4
There Are Two Web Publishing options:

Option 1: The user provides the content and WAG will assist them with the
design and implementation of the site. The user will maintain the
site once implemented.
The skills required to maintain a web site can be obtained from IT training. The training schedule is
located at: http://www.mcinfonet.org/it/dat/signup/ and the web training classes are listed under
‘Standard Software Training’. Listed below are the necessary steps needed to be taken for the design
and implementation of a web site:

1. Get a Web Page Account for your site by following the instructions in the “How To Get An
Account For your Department or Yourself” section of this handbook.

2. Microsoft FrontPage is the College’s standard software web editor. Notify the IT Helpdesk (301-
251-7222) for installation of Microsoft FrontPage and WS_FTP (a File Transfer Protocol
Software) software if it is not already installed on your PC. You can also download WS_FTP from
MCInfonet by following the instructions in the “How to Install WS_FTP Software” section of this
handbook.

3. The user then gathers information and data in electronic format to be included in the website.

4. When the Web Page Account form is received by the Web Application Group, an
Analyst/Programmer will be assigned to work with the user to determine their needs. (Statement
of Requirements).

5. Base on the requirements, the WAG staff will determine the technical needs, a timeline, and
define the scope of the project.

6. The WAG staff will develop a draft of the website.

7. The user will then review the draft, and sign off on it after the necessary changes are made.

8. WAG will link the new site from the College’s website.
For example, http://www.montgomerycollege.edu/Departments/index.html or
http://www.montgomerycollege.edu/faculty/index.html and College directories, then notifies
the user via email that their website has been linked from the College’s site.

9. The WAG staff will consult with the user regarding training needs. The user can also check the IT
training schedule at http://www.mcinfonet.org/it/dat/signup/, or contact Ed Palaszynski at 240-
314-3061, or by email: epalaszy@montgomerycollege.edu

10. At this juncture, the user maintains the web site and contacts the IT Helpdesk at 301-251-7222
when assistance is needed.

http://www.montgomerycollege.edu/webinfo/ 5
OPTION 2: The user wants to design, implement, and maintain the site.
If the user needs WAG staff to assist with any database, form, script, and /or graphic designs’, see
below, the section labeled, “Additional Needs”.

1. Get a Web Page Account for your site by following the instructions in the “How To Get An
Account For your Department or Yourself” section of this handbook.

2. Microsoft FrontPage is the College’s standard web editor software. Call IT Helpdesk (301-
251-7222) for installation of Microsoft FrontPage and WS_FTP (a File Transfer Protocol
Software) software. You can also download WS_FTP from MCInfonet by following the
instructions in “How to Install WS_FTP Software” section in this handbook.

3. The user proceeds to develop his/her website. The user will contact the IT Helpdesk at 301-
251-7222 when help is needed.

4. The user uploads their web files to the web server following the instructions in the ”How to
Use FTP” section of this handbook.

5. Users will test and review the websites and correct any problems including spelling, and
broken links.

6. The user notifies WAG via email (webmastr@montgomerycollege.edu) when the website has
been completed, so the new site can be linked from the College’s web pages. WAG will link
the site to http://www.montgomerycollege.edu/Departments/index.html or
http://www.montgomerycollege.edu/faculty/index.html and College directories and then
notify the user via email that their website has been linked from the College’s websites.

7. The user maintains the web site and contacts IT Helpdesk at 301-251-7222 when assistance
is needed.

“Additional Needs”: If the user requests the use of a database, form, script, and/or
graphic design.
• The user with the assigned WAG staff member will determine the needs
of the site. (Statement of Requirement).
• For graphic design, this will include a Graphic Designer, and an initial
review of any content/art drafts, to be provided by the user.

1. Based on the requirements, the WAG staff will define the technical needs, scope of the project
and develop a time line.
2. The WAG staff develops the initial database, form, script, and/or graphic design. For graphic
design, the Graphic Designer will work with the user to clarify graphic content and initial design.
3. The user reviews the draft for any final changes, and then signs off on it.
4. The WAG staff finalizes the database, form, script, graphics or artwork.
5. The WAG staff will link and upload files to the appropriate location of the web server
and notifies the user via email.
6. The user maintains the web site and contacts IT Helpdesk at 301-251-7222 when assistance is
needed.

http://www.montgomerycollege.edu/webinfo/ 6
How to Obtain an Account for Your Department or Yourself

To obtain one of the following web accounts:


• EDU Departmental http://www.montgomerycollege.edu/Departments/
• EDU Individual http://www.montgomerycollege.edu/faculty/
• MC Infonet Departmental http://www.mcinfonet.org/
• Web4Students Individual http://web4students.montgomerycollege.edu

Please fill out the WEB ACCOUNTS REQUEST FORM at


http://www.montgomerycollege.edu/webinfo/webaccountapp.html, print the form, get your College
Administrator (Dept. Dean or Director) to sign the form, and send it to the IT Web Application Group
(WAG). When WAG receives the form, WAG will contact you by email or telephone to provide
assistance and instructions tailored to your specific requirements within a two-week period. Your user ID
and password will be forwarded to you via regular MC interoffice mail.

http://www.montgomerycollege.edu/webinfo/ 7
Ipswitch WS_FTP Home

Description
File Transfer Protocol (FTP) software enables users to log on to the remote server via the Internet, and
transfer files between the remote servers’ and local storage areas.
Common uses are: upload, download, create and delete LOCAL (your computer) and REMOTE (the
webserver) files and subdirectories.

How to Install Ipswitch WS_FTP Home Software


To install Ipswitch WS_FTP Home software, perform the following steps or call the IT Helpdesk at 301-
251-7222 to place a work order to have it installed on your PC.
1. Click on the Web Tools page link:
http://www.montgomerycollege.edu/webinfo/webtools.html .
2. Click the “File Transfer Protocol” link.
3. A “File Download” box appears. Choose “Open”.
4. The installation program will begin to download. This process should take about one minute.
When it’s finished, the blue Install Shield Wizard screen will appear.

5. Choose “Next” to begin the installation process.


6. The License Agreement screen will appear. Choose “I accept the terms of the license
agreement” and click “next”.
7. The “Choose Destination Location” screen will appear. Click “Next”.
8. The ”Select Program Folder” will appear. Click “Next”.
9. The “Start Copying Files” screen will appear. Click “Next”
10. The “Install Shield Wizard Complete” screen will appear. Click “Finish” and the FTP program will
open.

http://www.montgomerycollege.edu/webinfo/ 8
Connecting to your website
*At this point, you will need your login information which was provided to you by the Web
Applications Group:
Host Name (Server Address)
User ID (User Name)
Password

11. The Connection Wizard “Welcome” screen will appear. Click “Next”.

12. The “Site Name” screen will appear. Enter whatever name you wish. Click “Next”.
13. The “Connection Type” screen will appear. Choose “FTP”. Click “Next”.
14. The “Server Address” screen will appear. Enter the Server Address (Host Name), which is
usually either www.montgomerycollege.edu or www.mcinfonet.org. Click “Next”.
15. The “User Name and Password” screen will appear. Enter your User Name (User ID). Enter
your Password. Click “Next”.
16. The “Finish” screen will appear. Click “Finish” and it will connect to your web account.

http://www.montgomerycollege.edu/webinfo/ 9
FTP Do’s and Dont’s

• In the screenshot above, the left screen is LOCAL (your computer) and the right screen is
REMOTE (your website). The green arrows in the center indicate the direction of file transfer.
• When selecting or “clicking” on a file, be sure to click only ONCE on the file. Do Not
DOUBLE CLICK when selecting files. Double clicking will initiate file transfer and cause the
file to be overwritten without the user’s knowledge.
• When making any changes to your web page -
1. Download a copy from the server, using FTP
2. Make any needed modifications
3. Upload the modified copy to the web server, using FTP

DO NOT modify the copy of your web page that exists on a desktop computer and then
upload it to the server. Since the IT Web Application Group often assists users to update
their web site, copying the current version from the server insures you are modifying the most
recent copy of the web page.
• When transferring files remember to RENAME the file so that the original file will still exist (in
case you need it in the future) and the file you create does not override the existing file.
• When renaming a file it is recommended that you use the following format:
filename.yymmdd.YourInitials. For example, if you are renaming “index.html” the new file
name would become “index.html.020711.abc

http://www.montgomerycollege.edu/webinfo/ 10
Steps to Back-up and Update Web Pages
This procedure helps you properly retrieve, edit and upload web pages. It also gives tips on
safeguarding your edits from errors and finally describes important general information concerning web
page updating at the College.
1. Find the name of the HTML file you want to update using your web browser (ie. Netscape or
Internet Explorer).
2. Use Ipswitch WS_FTP Home to download the file from your website to your computer.
3. Make a backup copy of the file in your computer in case you make mistakes when editing.
4. Edit the HTML file you downloaded in step 3 to make the updates to the web page.
5. Use Ipswitch WS_FTP Home to upload the updated file from your computer to your website.
6. Check the updated file using your web browser to make sure your changes look OK.
Please remember to follow the steps listed above each time you update your web pages.

http://www.montgomerycollege.edu/webinfo/ 11
Process for creating the "backup files" folder –
Your website folder will look similar to the image below:
(Note: Internet Explorer is shown here, but there are other options)

1. To make a "back-up" folder, start by creating a backup folder under your computer directory and
name the folder "backup files". You will only have to create the backup folder once.

Use this folder to keep all the back-up files of your work. It’s important to have backups in case you
make mistakes while editing the files. You will always have access to these files since you have saved
them.

http://www.montgomerycollege.edu/webinfo/ 12
Next, copy and paste the HTML file (index.html) into the newly created "backup files" folder.

Rename the file (index.html) by adding the current date to the end of .html.
Example: index.html.09302002

http://www.montgomerycollege.edu/webinfo/ 13
Over time, you could have several renamed copies - index.html.04112002, index.html.07052002, and
index.html.09302002 - in your "back-up files" folder. There will always be only one file labeled index.html
and this is the file that is actively seen on the browser.

In summary, every time you need to make changes to the index page of your website you will edit the
index.html file by downloading it from the server (it's the latest version), copying it to
your "backup-files" folder, renaming the file by adding the date to the end, then editing the
index.html file and uploading it back to the server.

Common Errors and Solutions:


ERROR: SOLUTION:
You assume you’re the only one who makes The reality is that other groups such as the Web
changes to your website pages. Application Group (WAG), after receiving your
permission, can periodically go in and update your
web pages.
You make edits to and upload from a local copy of Always start by downloading an original file from
your file without first downloading the original from the server in order to preserve the most recent
the web server. edits. Otherwise you risk overwriting recent
changes.
You edit the file locally, fail to upload it to the web Unless you upload your file to the web server, none
server yet expect that the local edits will be of the changes will be seen on the website.
reflected on the web server.
You don’t make a backup copy of the page file Remember to always make a back-up copy first
before editing it. and then perform the editing.
Multiple users concurrently edit the file so that WAG will always notify you when we are working
someone ends up overwriting another's changes. on your site after receiving your permission.
Always coordinate with others whom you permit to
update your site.

http://www.montgomerycollege.edu/webinfo/ 14
Microsoft FrontPage 2000
The Web Application Group recommends Microsoft FrontPage 2000 as the standard web page
development software tool for Montgomery College users. Microsoft FrontPage 2000 software
should not be used with the Personal Web Server in order for users to participate successfully
in the College’s website environment.

Setting Up Local Web Folders To Contain Data


The following is a recommendation for Montgomery College users on how to configure Microsoft
FrontPage 2000 web in order to participate successfully in the College’s website environment.
After FrontPage 2000 has been installed on your computer, you can set up “personal webs” to
contain data locally on your PC. A personal web is a local web folder (a place or location) on
your computer where you save files. Personal Webs (local web folders) serves a function
similar to the folder “My Documents.”

To Create A Microsoft FrontPage 2000 Local Web Folder


1. Start Windows.
2. Click the Start button in the lower-left corner of the screen, select Programs,
and then select MS FrontPage.
3. Click on File -> New -> Web.
4. In the New FrontPage Web dialog box: (See illustration below)

a. Select the Empty Web icon.


b. Then enter the location of your FrontPage web, for example: C:\My
Documents\My Webs\WebAppGroup, then click the OK button.

http://www.montgomerycollege.edu/webinfo/ 15
Note: If your folder has not previously been defined as a FrontPage Web, the program
will ask whether you want to turn it into a FrontPage Web folder, select Yes.
Tips:
Use the same name for your LOCAL (your computer) and REMOTE (the webserver)
subdirectories and documents!

The FrontPage Editor window opens, displaying the folders and files in your web.

To Open An Existing Microsoft FrontPage 2000 Local Web Folder


1. Start Windows.
2. Click the Start button in the lower-left corner of the screen, select Programs,
and then select MS FrontPage.
3. Click File -> Open Web.
4. From the list, (see illustration below), select an existing FrontPage web to open.
5. Click Open to open an existing FrontPage Web folder.

http://www.montgomerycollege.edu/webinfo/ 16
MS FrontPage Do’s and Don’ts

I. Features Recommended For Use In The MC Website Environment


The Web Application Group’s recommendations describe specific Microsoft FrontPage 2000
features that should be used in the Montgomery College website environment. Procedures and
examples are listed below.

1. Relative Hyperlinks

A relative link points to a page according to its relation to your current directory.
Relative links are easily recognized because they do NOT include the domain name of
the server. Using relative links will make your site more portable if there is ever a need
to change the domain name, and also ensures smooth testing of more complex
collections of pages as long as the identical structure of folder and file names is
maintained on both the server and on your computer.
To build a relative link, you only need to specify where a file is located in relation to the
file you are link from.
For example, if you are creating a link on any page located in the folder
http://www.montgomercollege.edu/Departments/mydept/ -

<a href="button.html"> will link to


http://www.montgomerycollege.edu/Departments/mydept/button.html

<a href="images/button.html"> will link to


http://www.montgomerycollege.edu/Departments/mydept/images/button.h
tml

http://www.montgomerycollege.edu/webinfo/ 17
…in these first to cases, the URL inside the href tag is simply appended onto the
name of
the folder that contains the file you are editing.

<a href="../images/button.html"> will link to


http://www.montgomerycollege.edu/Departments/images/button.html

<a href="../../images/button.html"> will link to


http://www.montgomerycollege.edu/images/button.html

… in these two cases, each occurrence of the combination ../ pushes the
reference point
one step earlier on the chain of nested folder. A single ../ drops the current folder
(/mydept) from the link URL and looks in the parent folder (/Departments)
instead. Two of them (../../) also drops the parent folder name from the URL,
taking the user back to the root.

<a href="/images/button.html"> will link to


http://www.montgomerycollege.edu/images/button.html
… the final example is a powerful special case. The leading / (without any dots)
is shorthand for the server root directory, in this case,
“www.montgomerycollege.edu”. Compare the first example <a
href=”button.html”>, which looks for “button.html” in the current folder, with <a
href=”/button.html”>, which looks for it directly off the root.

A. The Correct Method To Insert A Hyperlink Using MS FrontPage 2000


1. Open the MS FrontPage 2000 web where your document is
located.
2. In the MS FrontPage 2000 Folder List window, double-click on
the file to open your document.
3. From the MS FrontPage 2000 Editor, place your cursor in front of
the text where you want to create a hyperlink, click ONCE and hold
down the left mouse button, dragging across the text until the area is
highlighted.
4. From the main menu bar at the top of the page, select Insert, and
then select Hyperlink. In the Create Hyperlink window,
To Link to local document:
Click on the file to link to and then click OK.
To Link to another URL:
In the URL box, type in your address (i.e. http://www.cnn.com/)
and then
click OK.

Tips:

http://www.montgomerycollege.edu/webinfo/ 18
1. Make sure you use the correct URL in your links: check the base href starting
point, directory name and actual filename!
2. Check your documents for spelling errors, extra spaces and incorrect URLs
BEFORE and AFTER posting!

II. Features That Should NOT Be Used In The MC Website Environment


Because of our web server environment, the Web Application Group recommends that the
following three Microsoft FrontPage 2000 features should NOT be used in the Montgomery
College website environment.

1. Publish –
Montgomery College Department and Individual account holders that develop web pages must
not use the Microsoft FrontPage 2000 Publish feature to transfer documents to the
Montgomery College website. The Web Application Group recommends that the freeware File
Transfer Protocol program WS-FTP be used instead. The WS-FTP software is easy to use, and
allows users the ability to view what files or folders are being transferred to or from the remote
location. WS-FTP is available online for downloading from: www.ipswitch.com or
http://www.mcinfonet.org/download/. Detailed procedures for using WS-FTP software are
described in the section “Using FTP.”

2. Recalculate Hyperlinks –
Microsoft FrontPage 2000 automatically recalculates the web’s hyperlinks whenever a page is
updated, moved, renamed or deleted. If the user initiates a manual Recalculate Hyperlinks
from Microsoft FrontPage 2000 Explorer, it will cause Microsoft FrontPage 2000 to insert
HTML code indicating the data’s actual location on their computer (c://file:library) to be inserted
into all of their HTML documents.
=If these documents are copied to the Montgomery College website, all of the hyperlinks will
incorrectly point to the local origin on the user’s machine.

3. Long Filenames –
The Microsoft Windows Operating System permits long filenames (more then 8 characters).
However, we recommend the following:
1. Users should name their files with the standard MS-DOS format of less than 8 characters in
the filename, and 3 characters in the extension.
2. Recommended samples of filenames:
index.html (your home page) abcd.htm or abcd.html (regular pages)
abcd.gif (image file) abcd.jpg (image file)

http://www.montgomerycollege.edu/webinfo/ 19
Tips:
1. We recommend that you use all lowercase, with no spaces and no special characters in
your LOCAL (your computer) and REMOTE (the webserver) filenames. The REMOTE
webserver that you are transferring your files to is case-sensitive and does not work well with
special characters.
Examples of non-special characters: A-Z, a-z, 0-9, _ (underscore), . (period)
Abcd.html and abcd.html are different files!
2. Filenames should not start with a . (period).
3. Another reason we recommend less than 8 characters naming convention is that it will be
easier to remember the name of the pages of your documents!

MS FrontPage Advanced Components

In the FrontPage Editor, the following advanced components are NOT recommended for
use: ActiveX control, Java applet, Plug-in, Script, and Design-Time control.

A-Prompt (Accessibility-Prompt) Overview


(Information from the A-Prompt website http://aprompt.snow.utoronto.ca/overview.htm and A-Prompt Help.)

Adding accessibility awareness to web authoring tools

A-Prompt (Accessibility Prompt) version 1.0.6 is a software program designed to improve web
site accessibility for people with various disabilities. By evaluating web pages for accessibility
barriers and making repairs to correct those problems, A-Prompt helps web developers and
content authors create sites that are accessible to the widest possible audience.

A-Prompt is based on accessibility guidelines developed and maintained by the


"http://www.w3.org/WAI/", (WAI - Web Accessibility Initiative) a branch of the
"http://www.w3.org".

This software tool is made available through the collaborative efforts of the University of
Toronto's "http://www.utoronto.ca//atrc/" and the "http://trace.wisc.edu/" at the University of
Wisconsin. Both research groups are dedicated to improving the availability and accessibility of
information technologies for people with disabilities.

The issue of accessibility on the World Wide Web is becoming increasingly important especially
in light of legislation (Section 508) in the United States. Section 508 of the Rehabilitation Act will
require all U.S. federal agencies to make electronic information fully accessible to people with
disabilities by July 1, 2001.

A-Prompt affords web builders an opportunity to test fully functional sites and those under
construction for accessibility problems in a comprehensive and efficient manner. The software is
easy to use and offers extensive “Help” files to guide the user step-by-step through each repair
process.

http://www.montgomerycollege.edu/webinfo/ 20
http://www.montgomerycollege.edu/webinfo/ 21
Types of repairs

1. Adding descriptive text to a 32. Language changes not indicated


document [manual check]
2. Alternate text is suspicious 33. Language not identified
3. Alternate text may be too long 34. Link text may not be meaningful
4. APPLET missing alternate 35. List usage invalid
content 36. Metadata missing
5. ASCII art missing description 37. Multimedia requires synchronized
6. ASCII art missing skipover link text [manual check]
7. Auto-redirect must be removed 38. Multiple links missing skipover
8. Auto-refresh must be removed 39. New windows require warning
9. BLINK/MARQUEE invalid markup 40. OBJECT missing alternate
10. Color Contrast Low content
11. Color usage [manual check] 41. Programmatic object may not be
12. DOCTYPE missing accessible [manual check]
13. Flicker should be avoided 42. Programmatic objects require
[manual check] testing [manual check]
14. FRAME missing title 43. SCRIPT missing NOSCRIPT
15. FRAMESET missing section
NOFRAMES section 44. Script not keyboard accessible
16. FRAMES may require descriptive 45. Sound file missing text transcript
text 46. Stylesheets missing [manual
17. FRAME source invalid check]
18. Header may be invalid 47. Stylesheets require testing
19. Headers may require markup [manual check]
20. Headers not nested 48. TABLE (data) may require
21. Image (button) missing alternate header abbreviations
text 49. TABLE (data) may require
22. Image map AREA missing markup
alternate text 50. TABLE (data) missing headers
23. Image map (client-side) missing 51. Table (layout) headers are invalid
text links 52. TABLE (layout) may not linearize
24. Image map (server-side) missing properly
text links 53. TABLE missing caption
25. Image map (server-side) requires 54. TABLE missing summary
conversion 55. TABLE purpose unknown
26. Image missing alternate text 56. Text equivalents require updating
27. Image missing descriptive text [manual check]
28. Image missing d-link
29. INPUT missing default text
30. LABEL missing – INPUT
31. LABEL needs repositioning

http://www.montgomerycollege.edu/webinfo/ 22
Overview

Upon launching the A-Prompt program, content developers are presented with
A-Prompt's "File Selector" dialog box. A-Prompt's "File Selector" dialog box enables web
content developers to locate specific files and ensure they conform to Web Accessibility
Initiative (WAI) guidelines.

The "File Selector" dialog box allows users to locate a directory on the computer hard drive
through the "Select Files To Repair" dropdown menu. When a selection is made, a data tree
appears in the directory window displaying all available folders and files enabling content
authors to quickly locate web document(s) that require testing.

Once the type(s) of files have been selected for evaluation, the "File Selector" lists them in the
directory window and provides such information as the file's name, size, when it was last
modified, and file type.

When a file is selected for testing, A-Prompt launches the "Accessibility Problems" repair dialog
box. The "Accessibility Problems" dialog box identifies and lists all accessibility problems found
within selected documents.

If a user returns to the "File Selector" dialog without making the recommended repairs, A-
Prompt places a black "X" beside the filename indicating the accessibility problems have not
been addressed. If only some of the repairs are completed, the "File Selector" places a black "?"
beside the filename to indicate accessibility issues remain in the document. When all
accessibility repairs have been addressed, the "File Selector" places a green checkmark beside
the filename.

Once repairs to selected documents have been completed the "Quit" button is selected and A-
Prompt automatically saves all changes made to files within the site. This also automatically
closes the program. A-Prompt stores all changes made to a document so that if a content
developer accesses the file at a later date the program indicates whether the document was
repaired, partially repaired, or not repaired.
Quick Start

1. Upon launching the A-Prompt program, the “A-PROMPT - FILE SELECTOR”


screen will be displayed.

2. In the “SELECT FILES TO REPAIR” section click on the arrow that will display a
dropdown list. Click on the file that needs testing for accessibility.

3. Under “SHOW THESE TYPES OF FILES” section click on any one of the three
checkboxes: "HTML Files", "Text Files" or or "All Files".

4. In the “FILE SELECTOR” screen, under the “NAME” section, click on the file
you want to repair. Click the “REPAIR” button.

5. The next screen will be labeled “A-PROMPT – TABLE PURPOSE”. Click on


one of two radio buttons: "Data Table" or "Layout Table". Continue to click the
“NEXT” button as you move through the “TABLE PURPOSE” screens until you
get to the “FINISH” button. Click on the “FINISH” button.

6. You will now be at the “ACCESSIBILITY PROBLEMS” screen. Click the


“REPAIR” button at the bottom of the screen.

7. Below are some of the examples of the screens you will see when making
repairs:
• “Image missing alternate text” screen
• “Image missing descriptive text” screen
• “Manual Checks” screen
• “Multiple links missing skipover” screen
• “SCRIPT missing NOSCRIPT section” section
• “FRAME missing title” section
• “TABLE (data) missing headers” section
Select the “REPAIR” button to return to the “ACCESSIBILITY PROBLEMS”
screen.

8. When accessibility issues have been repaired, select the “DONE” button. The
“SAVE VALIDATED FILE AS” screen is shown, click on the “SAVE“ button.

9. In the “A-PROMPT - FILE SELECTOR” screen, under the “NAME” section,


click on another file to repair and repeat steps 6 through 12.

10. When all repairs are completed select the “QUIT” button at the bottom of the
“FILE SELECTOR” screen to save all repairs and exit A-Prompt.
Getting Started
The following four steps are designed to provide users with the basics for getting started in A-
Prompt. The program itself is very intuitive and includes extensive help files to guide users step-
by-step through each repair.

STEP 1: A-Prompt File Selector Dialog Box


Upon launching the program, content developers are presented with A-Prompt's
"File Selector" dialog box. The "File Selector" allows users to choose specific files for
accessibility testing through the "Select Files To Repair" dropdown menu.

“Select Files To Repair”:


This menu lists the full name of all drives found on the user's system. When a drive is selected,
a data tree appears in the directory window displaying all available folders and files allowing
content authors to quickly locate web document(s) that require testing. The "Up One Level"
button enables users to retrace their steps through each file folder hierarchy.
“Show these types of files”:
The "File Selector" also features three checkbox options under the heading "Show
these types of files" at the bottom of the dialog. Content developers can choose to have A-
Prompt display "HTML Files", "Text Files", or "All Files". (Note: If the "All Files" checkbox is
chosen, the other two selections become disabled.) In addition, the "Refresh" button
automatically updates the directory. If, for example, a new file has been added to the site but is
not currently being displayed, select "Refresh" and the new document will appear in the
directory listing.

If a file other than an HTML or text file is selected, A-Prompt launches an alert message asking
the user to confirm that they want to attempt to repair the file. Attempts to repair files that do not
contain either HTML source code or text (such as a program file, for example) results in a
second alert message being launched that indicates the file cannot be validated.
STEP 2: Accessibility Problems Repair Dialog Box
Accessibility Problems:
The "Accessibility Problems" repair dialog box lists the problem groups found within a
document in the left-hand column and the name, repair status, priority level, and auto-repair
state of specific accessibility problems on the right. Select the problem name(s) in the right-hand
column and then choose the "Repair" button. A-Prompt automatically launches a separate
repair dialog for each accessibility problem identified in a document.Users are returned to the
"Accessibility Problems" dialog box after repairs have been made to a particular document.
“Progress” Status Bar:
The “Progress” status bar keeps track of the number of repairs completed and an icon at the
end of the status bar indicates whether the document meets the conformance level pre-set by
the user.

“Completed Repairs Not Selectable” checkbox:


Above the status bar is a checkbox entitled "Completed Repairs Not Selectable". Enabling this
checkbox prevents the user from selecting files that have already been repaired.
Examples of Repairs

Example 1: Image Missing Alternate Text


Providing alternate or "alt" text for images is the first checkpoint listed in the Web Accessibility
Initiative (WAI) guidelines. All images, including those used for decorative purposes, graphical
representations of text, bullets, symbols, and spacers, require a text equivalent.

A-Prompt Repair:
The repair process for adding missing "alt" text is straightforward. Simply enter a text description
for the image in the text field provided. A-Prompt's repair dialog offers general guidelines for
writing appropriate "alt" text for specific images.

The repair for "Image missing alternate text" is now complete. Select the "Repair" button to
return to A-Prompt's "Accessibility Problems" dialog box.
Example 2: Frame Missing Title

According to Web Accessibility Initiative (WAI), content developers are required to provide a title
for each FRAME or IFRAME within a document. Web authors must identify the content and/or
the navigational links within a FRAME through the "title" attribute.

A-Prompt Repair:
The correct FRAME title for the example below might appear in the HTML source code as
follows:
<FRAME SRC="dummy.html" title="Table of Contents frame">

If the title attribute has not been included, A-Prompt will present a dialogue box providing
information about the the frame source file, and the name, if available.

Note that the "FRAME missing title" repair dialog box includes a text entry field enabling
content developers to add an appropriate title for each FRAME or IFRAME.

A-Prompt will automatically add the description entered to the document's HTML source code
by inserting a "title" attribute in each FRAME element.
The repair is complete after a title has been added to each FRAME or IFRAME. Select the
"Repair" button to return to A-Prompt's "Accessibility Problems" dialog box.
Example 3: TABLE (data) missing headers

According to the Web Accessibility Initiative (WAI), web authors must include row and column
headings for all data TABLES to ensure text-only browsers render the information contained
within the TABLE correctly.

Table for Age and Income


Level Statistics
Age Income Level
0 0
10 0
20 1000
30 20000
40 40000
50 60000
60 50000
70 30000
A-Prompt Repair:
Before the repair can take place, A-Prompt must first determine whether the TABLE has been
created to present data or for layout purposes. The "Table Purpose" dialog box displays the
contents of the table and presents two radio buttons: "Data Table" and "Layout Table". For this
repair, select "Data Table".
A-Prompt Repair (con’t):

If a data TABLE requires headings, A-Prompt offers content authors the option of adding column and/or
row headers via two checkboxes. The "Add column headers" checkbox features two radio buttons:
"Convert top cells to headers" and "Add new headers". Selecting the first radio button changes each data
cell in the top row into a heading. In the example below, A-Prompt would convert the data cells for "Age"
and "Income Level" into TABLE header elements.

If the top row of the data TABLE contains actual statistical information that cannot be used as headings,
select the second radio button and A-Prompt creates text fields above each column. After typing in an
appropriate heading for each column, select the "Repair" button to return to the "Accessibility Problems"
dialog box.

A-Prompt Repair (con’t):


This process can be repeated for rows within the TABLE as well.
The repair is complete after headers have been added to the data TABLE. Select the "Repair" button to
return to A-Prompt's "Accessibility Problems" dialog.
STEP 3: Saving Files
When all accessibility issues have been addressed, select the "Done" button to return to the "File Selector"
dialog box. The file will be saved according to the "File Saving" selection made in the "Settings" dialog
box.

If all accessibility issues have been addressed, a green checkmark appears beside the names of all
repaired files in the directory. If repairs are incomplete, A-Prompt places a question mark beside the
filename. If no repairs have been made to the document or the user fails to complete any repairs for a
particular document, a black "X" is placed beside the filename.

STEP 4: Finished
Select the "Quit" button at the bottom of the "File Selector" dialog box to save all repairs and exit A-
Prompt.

Contact Information

The Web Application Group is responsible for the Internet, Intranet, Web4students web, and
WebCT server(s) administration at Montgomery College.
Submit your comments via email to the Web Application Group at:
webmastr@montgomerycollege.edu.
Requests for support should go through the IT Help Desk, ithelpdesk@montgomerycollege.edu or call
(301) 251-7222.