# Presentation: 334300

## FSIS Re-design Project
Web Site Maintenance Training Day 3

March 4, 2004

**Web Site Maintenance Training Day 3**
- March 4, 2004

## Agenda

**Training Agenda (9:00am – 9:15am )**
**Defect Tracking (9:15am – 9:45am)**
**Visual Source Safe (9:45am – 10:15am)**
**Browser / 508 Compliance (10:15am - 11:15am) **
**Exercise / Review (11:15am – 12:00pm)**

**Agenda**

## Training Agenda

**Day 1 Topics**
**HTML / ASP Development**
**Homesite HTML Editor**

**Day 3 Topics**
**Defect Tracking**
**Version Control**
**Browser / 508 Compliance (10:15am - 11:15am) Testing**
**Question & Answer**

***This training program will provide you with the instructions, tools, and resources necessary to maintain and continue development of the re-designed ***_[www.fsis.usda.gov](http://www.fsis.usda.gov/)__ Web site._

**Day 2 Topics**
**Site Map**
**Content Creation**
**HTML / ASP Templates**
**Style Guide**

## Training Progress

**Training Progress**

_**Content Creation**_

_**Page Development**_

_**Testing**_

**HTML / ASP Develop.**
**Home Site HTML Editor**
**Style Guide**
**Visual Source Safe**
**Templates**
**Defect Tracking**
**Site Map**

**Site Map**
**Templates**
**Content Submission Worksheets**
**Style Guide**

**Defect Tracking**
**Visual Source Safe**
**Browser / 508 Compliance**
**Style Guide**
**Site Map**

***Finished Page***

- If errors...

- If no errors...

**Notes:**
The Style Guide fits into all areas as it sets guidelines for how content will be designed on the page.  In order to properly develop and test a page, the Style Guide will also be needed.

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**Defect Tracking (9:15am – 9:45am)**
- Customized Defect Tracking
**Visual Source Safe (9:45am – 10:15am)**
**Browser / 508 Compliance (10:15am - 11:15am)**
**Exercise / Review (11:15am – 12:00pm)**

## Training Progress

**Training Progress**

_**Content Creation**_

_**Page Development**_

_**Testing**_

**HTML / ASP Develop.**
**Home Site HTML Editor**
**Style Guide**
**Visual Source Safe**
**Templates**
**Defect Tracking**
**Site Map**

**Site Map**
**Templates**
**Content Submission Worksheets**
**Style Guide**

**Defect Tracking**
**Visual Source Safe**
**Browser / 508 Compliance**
**Style Guide**
**Site Map**

***Finished Page***

- If errors...

- If no errors...

**Notes:**
The Style Guide fits into all areas as it sets guidelines for how content will be designed on the page.  In order to properly develop and test a page, the Style Guide will also be needed.

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**Defect Tracking (9:15am – 9:45am)**
- Customized Defect Tracking
**Visual Source Safe (9:45am – 10:15am)**
**Browser / 508 Compliance (10:15am - 11:15am)**
**Exercise / Review (11:15am – 12:00pm)**

## Overview

***Issue tracking is an essential part of the development process. ***
**Whenever initial development of a file is complete, the developer opens an issue to alert the tester that the page can be tested. **
**The tester then tests the page, logs any issues, and then returns the page to the developer if changes are needed. **
**This virtuous circle continues until the page meets all FSIS and USDA design and technical standards and the page is marked complete. **
**Completed pages are then ready for the live site!**

## Logging In

***Before using the issue tracking tool, the user will need to log in. Login ID and password will be provided by the AISD team.****** ***

## Issue Tracking Summary Page

***The issue tracking tool Summary View shows open issues sorted by priority: High, Medium, Low, and Total.***

## Adding an Issue

***To add an issue, click on the Add button from the Summary Page. ***

## Issue Tracker Log

***Create a new issue on the Add Issue Log Screen. Categories include:***
**Title of Issue**
**Date of Issue**
**Submitted By**
**Priority**
**Area (Project Phase)**
**Category (Global area of site)**
**Browser Version**
**Description**
**Current Condition**
**Assigned To**
**Target Date for Completion of Issue**

## Example Issue

***	******Let’s create an example issue.  Anthony from the development team has completed the Food_Safety_Education page to the testing environment and creates an issue for Dave from the testing team to test the page. ***
**Title of Issue: Food Safety Education Moved to Test**
**Date of Issue: 3/4/04**
**Submitted By: Anthony Perry**
**Priority: Low **
**Area: FSIS Redesign Development**
**Issue Category: Food Safety Education**
**Browser Version: All Browsers**
**Description: Development on the Food Safety Education page is complete. Please test and log any issues with the page.**
**Current Condition: Development complete**
**Assigned To: David Theis**
**Target Date for Completion of Issue: 3/6/04**

## Example Issue

***Dave goes to the issue summary and sees an issue has been assigned to him. He clicks on the detail button to view the issue:***

## Example Issue

***Dave sees the issue and tests the page, but Anthony’s Food Safety Education page still had some errors, especially in Netscape 6.0. Dave edits the issue for the page, adds comments at the bottom of the page, and reassigns it to Anthony.  Since this is an update of a previous issue, there are additional fields for Dave to fill out: ***

**Status: Can be listed as closed, open, in-progress, fixed, closed-duplicate, failed retest, and ready for release. This page would be marked failed retest. **
**Date Resolved: 3/5/04**
**Resolution: Issued routed back to developer to fix defects. **
**Resolved By: David Theis**
**Program Files: From Food Safety Education: Content, Section_Header**
**Comments: There are still the following errors on the page: breadcrumbs do not link to correct pages, right nav is moved over slightly to the right, and a few more errors on the content area. I dropped comments off on a printed page in your office. **
**Recommendation: Rebuild. **

## Example Issue

***Anthony receives the issue. ***
**He updates the page accordingly, returns the file to test, and notifies Dave by updating the issue in the issue tracker. **
**When Dave sees the issue in the issue tracker has been reassigned to him, he retests the page. Since the page has no errors, Dave changes the issue status to Ready for Release and notifies Anthony and the person responsible for migrating the page to the production environment. **
***	******Using issue tracking simplifies the development and test process and gives a clear status of all pages that have been developed but have yet to be complete. ***

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**Defect Tracking (9:15am – 9:45am)**
**Visual Source Safe (9:45am – 10:15am)**
- What is version control?
- Using Visual Source Safe
- Review
**Browser / 508 Compliance (10:15am - 11:15am)****	**
**Review**

## Training Progress

**Training Progress**

_**Content Creation**_

_**Page Development**_

_**Testing**_

**HTML / ASP Develop.**
**Home Site HTML Editor**
**Style Guide**
**Visual Source Safe**
**Templates**
**Defect Tracking**
**Site Map**

**Site Map**
**Templates**
**Content Submission Worksheets**
**Style Guide**

**Defect Tracking**
**Visual Source Safe**
**Browser / 508 Compliance**
**Style Guide**
**Site Map**

***Finished Page***

- If errors...

- If no errors...

**Notes:**
The Style Guide fits into all areas as it sets guidelines for how content will be designed on the page.  In order to properly develop and test a page, the Style Guide will also be needed.

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**Defect Tracking (9:15am – 9:45am)**
**Visual Source Safe (9:45am – 10:15am)**
- What is version control?
- Using Visual Source Safe
- Review
**Browser / 508 Compliance (10:15am - 11:15am)****	**
**Review**

## Visual Source Safe Overview

***	******Version control systems are packages that can record multiple versions of a source file, usually storing the unchanged parts of the file just once. Version control systems also record history information such as the creation time of each version, who created it, and a description of what was changed in that version. The version control software being used on the re-design project is Microsoft Visual Source Safe 6.0 (VSS). ***
**Microsoft Visual Source Safe 6.0 (VSS) helps manage projects, regardless of the file type (text files, graphics files, binary files, sound files, or video files) by saving them to a database. **
**When you add a file to VSS, the file is backed up on the database, made available to other people, and changes that have been made to the file are saved so you can recover an old version at any time. Web Team Members can see the latest version of any file, make changes, and save a new version in the database.**
**VSS project organization makes team coordination easy and intuitive. When a file (or set of files) is ready to deliver to another person, group, Web site, or any other location, VSS makes it easy to share and secure different versions of the selected set of files.**

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**Defect Tracking (9:15am – 9:45am)**
**Visual Source Safe (9:45am – 10:15am)**
- What is version control?
- Using Visual Source Safe
- Review
**Browser / 508 Compliance (10:15am - 11:15am)****	**
**Review**

## Using Visual Source Safe for Version Control

***	******To use the version control features of VSS, open VSS from the start menu by selecting:***
**Start ******** Programs ******** Microsoft Visual Source Safe ******** Visual Source Safe 6.0**
**Enter your username and password and you will see the VSS Explorer Window:**

## Setting up

***When using version control with the FSIS environment setup, the latest version of development files should always be kept in VSS. ***
**Whenever a new file or directory is created, add it to VSS so that it can become part of the versioning process. **
**The following example adds the About_FSIS folder in the development environment into the FSIS Web VSS project. **

## To add files: 

***	******Whenever a new file is created, it needs to be added to the FSIS Web project in VSS. ***
**Highlight the FSIS Web Project**
**Select File******** Add Files**

## To add files: 

***The Add File Window will appear. ***
**Choose the folder or files you want to add. **
**For the FSIS Web, files should always come from the development directory C:/fsis/wwwroot/. In the example below, we add the c:/fsis/wwwroot/About_FSIS directory to the project. To do this, select the directory and click Add. **

## To add files: 

***The Add Folder Window Appears.***
**It’s generally a good idea to add comments if you are adding a number of files or something not readily obvious from the file names. **
**Notice the *****Recursive***** checkbox is checked. If you want to move over a folder and its subfolders, you should check the Recursive box. If you just want to move over the folder and nothing below it in the directory tree, leave the recursive box unchecked. **

## To add files: 

***	******After the files have been added, select close in the Add file window. The files now appear in the VSS Explorer window. ***

## Editing Files in the Development Directory: The Check Out Function

***	******Whenever working with a file, you will need to check out the latest copy from the VSS database. ***
**When you check out a file, you will be able to edit it and it is locked to all other users. No one else can edit the file until you check it back in (explained later). **
**NOTE: You can check out files, folders, or the entire project, but since a file cannot be edited by anyone else while checked out, it is good practice to only check out files that you will be editing. **
**The next example explains how to check out files or folders into your working folder. Specifically, we will check out the Animal_&_Egg_Production_Food_Safety folder and files to the development directory. **

## Editing Files in the Development Directory: The Check Out Function

***Select the directory you want to use. ***
**In this example, we will select the /fsis/About_FSIS/Animal_&_Egg_Production_Food_Safety folder and files. **

## Editing Files in the Development Directory: The Check Out Function

***Right click on the file or folder you want to edit and select Check Out***

## Editing Files in the Development Directory: The Check Out Function

***The Check Out window now appears.******  ***
**When you check out a file, the file is moved from the VSS database to the directory you specify.  **
**For FSIS, files should always be checked out to folders in the Development directory, which is in the C:/fsis/wwwroot/ directory. **
**Since we want to check out all the files in this directory, we select the Recursive. We also select the Build tree options which will keep the directory structure in tact. **

## Editing Files in the Development Directory: The Check Out Function

***Use the Browse option to find the folder in the development directory which matches the folder in the VSS database.  ***
**In this case, we’re checking out: Animal_&_Egg_Production_Food_Safety from the source safe database to its working development directory, which is: **
- C:\FSIS\WWWROOT\ABOUT_FSIS\Animal_&_Egg_Production_Food_Safety
**Select OK when you find the directory you need. Then click OK in the Check Out Window to complete the check out. **

## Editing Files in the Development Directory: The Check Out Function

***Files which have been check out now appear in red in the VSS Explorer window. ***
**We are now free to edit all files which have been checked out. **
**The right column labeled Check Out Folder shows where the files are: in our development directory. **
**As long as files are checked out to you, you will be able to edit them in HomeSite but no one else can have edit the file, hence it is considered Locked to the other users. **

## Checking Files back in:

***	******After edits on a file or a group of files have been completed, the files should be checked back in. ***
**Checking in returns the file to the VSS database so that others can access it**
** **
**In the example below, we will check in the Animal_&_Egg_Production_Food_Safety folder and files that we checked out in the example above. **
**NOTE: Since checked out files cannot be edited by other users, files should always be checked back in when completed. To avoid sharing violations and preserve integrity of the site and code, all files should be checked in at the end of the day. **

## Checking Files back in:

***After editing the files you had checked out, check them back in from the development directory.****** ***
**To do this, right click on the file or folders you want to check back in and select Check In...**

## Checking Files back in:

***The Check-in box will now appear. ***
**Select the directory you want to check files back in from. This should be the same directory where you checked the files out to, and also the same directory where you made the edits to the files. **
**Again, if you want to check in a folder and its subdirectories, select the Recursive and Override working folders options. **

## Checking Files back in:

***The files have now been checked back in. ***
**They will no longer appear red and are now accessible to other users to check out and edit. **

## Moving files to the Test Environment: The GET Latest Version control. 

***After a file in the development stage is completed, the file is checked back into the VSS database. ***
**The file can no longer be edited and the latest version is now in the VSS database. **
**The file is not, however, been moved into the testing environment so users with test access will still be viewing the old version. **
**The section below explains how to use VSS to move files to the Test environment using the Get Latest Version to move the Animal_Egg_&_Egg_Production_Food_Safety to the testing environment. **

## Moving files to the Test Environment: The GET Latest Version control. 

***The Get Latest Version file extracts the most recent version of a file and copies a read only copy to a drive you select. ***
**VSS’s Get Latest Version is the perfect function for moving items to a test environment since edits should never be done in test.  **
**To move a folder or file to the test environment, make sure all files you are moving have been checked in (explained above), and right click on the files you want to move and select Get Latest Version.**

## Moving files to the Test Environment: The GET Latest Version control. 

***The Get window now appears for the folder or files you are moving. ***
**If you want to move the entire contents of the folder and its subfolders, select the recursive and Build tree check boxes. **
**Also make sure the Make Writeable box is NOT checked since the files should never be writeable in the test environment. To ensure you Get the files to the testing folder, select browse. **

## Moving files to the Test Environment: The GET Latest Version control. 

***The Folder Selection window now appears. All test files should be in the E:/fsis/wwwroot/ directory. ***
**Since we are Getting the Animal_&_Egg_Production_Food_Safety folder, we want to select the corresponding folder in the test environment, which is **
- E:\FSIS\wwwroot\About_FSIS\Animal_&_Egg_Production_Food_Safety
**After selecting the appropriate test environment folder, click OK in both Folder Selection and the Get windows. **

## Moving files to the Test Environment: The GET Latest Version control. 

***The latest versions of any of the selected files or folders will now be moved over to the Test environment. ***
**A list of all files which have been copied is now shown in the VSS Explorer. In this case, the content_animal_&_egg_production_food_safety.asp was the only file changed, so it appears in the Explorer window below. Each file which changed would appear there. **
**The latest version is now moved to test. It is a good practice to move any item which is ready for test to the test environment immediately after checking it back in. **

## Creating a New Page with VSS

***When you want to create a page which did not previously exist. Follow this series of steps (how to perform each step is detailed above). ***
**Create a new folder for the page in the C:/fsis/wwwroot directory. **
**Get Latest Version of the template(s) you are going to use to build the page to the folder you just created. This will copy the files you will use as your base for building the page.  Make sure you make these pages writeable, since you will be using them to create your new page. **
**Using HomeSite, build the page from the template files you just checked out. Remember to name the files using the file naming convention. **
**When development and unit testing of the page is complete in development, add the file to the VSS database. To do this:**
- Open the VSS explorer window;
- Since VSS’s file structure mirrors the development directory, highlight the appropriate directory for your new folder and files, then press Ctrl+A (This can also be done from the File Add Files in the top menu).
- Navigate to the folder you are going to add (the folder you just created for your page), select it, and click Add.
- Make sure when you select recursive since you are adding a folder and want to add its subfolders.
- The file is now added. To move to test, create a folder in the required area of E:/fsis/wwwroot directory, then Get Latest Version of the files from VSS to new, corresponding folder on E:/.

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**Defect Tracking (9:15am – 9:45am)**
**Visual Source Safe (9:45am – 10:15am)**
**What is version control?**
**Using Visual Source Safe**
**Review**
**Browser / 508 Compliance (10:15am - 11:15am)****	**
**Review**

## Moving files to the Test Environment: The GET Latest Version control. 

***Source Safe Best Practices:***
**Remember this axiom: *****Check out to Dev (C:\), Get to Test (E:\).***** Since all edits to files should occur in the development environment, they should always be checked out to ensure that another user is not editing the file at the same time. In terms of testing, the testing environment should always be clean and files in the testing environment should never be edited. The Get Latest Version option allows the latest files to be moved from the VSS database to the Testing environment**
**Only Check out files you need, since others will not be able to edit the files while they are checked out. **
**Always Check in files when you’re finished editing them. **
**Check in all files, even those still under construction at the end of the day. At the end of the day and first thing in the morning, the VSS database and the Development directory should contain the exact same files and folders. **
**HomeSite and VSS: HomeSite is set as the default editor for the VSS database on the DCHQDEV3 server. **
**When you are viewing files in Homesite, if a red dot appears next to the file, it is locked by VSS and the file is therefore Read Only. To unlock the file,  Check out the file and you can edit it. **

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**Defect Tracking (9:15am – 9:45am)**
**Visual Source Safe (9:45am – 10:15am)**
**Browser / 508 Compliance (10:15am - 11:15am)**
- Section 508 Compliance
- Browser Compliance
**Exercise / Review (11:15am – 12:00pm)**

## Training Progress

**Training Progress**

_**Content Creation**_

_**Page Development**_

_**Testing**_

**HTML / ASP Develop.**
**Home Site HTML Editor**
**Style Guide**
**Visual Source Safe**
**Templates**
**Defect Tracking**
**Site Map**

**Site Map**
**Templates**
**Content Submission Worksheets**
**Style Guide**

**Defect Tracking**
**Visual Source Safe**
**Browser / 508 Compliance**
**Style Guide**
**Site Map**

***Finished Page***

- If errors...

- If no errors...

**Notes:**
The Style Guide fits into all areas as it sets guidelines for how content will be designed on the page.  In order to properly develop and test a page, the Style Guide will also be needed.

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**Defect Tracking (9:15am – 9:45am)**
**Visual Source Safe (9:45am – 10:15am)**
**Browser / 508 Compliance (10:15am - 11:15am)**
- Section 508 Compliance
- Browser Compliance
**Exercise / Review (11:15am – 12:00pm)**

**Notes:**
Notes:

## Section 508 Compliance

***In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities. Inaccessible technology interferes with an individual's ability to obtain and use information quickly and easily. ***
**Section 508 was enacted... **
-    to eliminate barriers in information technology
-   to make available new opportunities for people with disabilities
-   to encourage development of technologies that will help achieve these goals
**The law applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508 (29 U.S.C. ‘ 794d), agencies must give disabled employees and members of the public access to information that is comparable to the access available to others.**

**Notes:**
Notes:

## Section 508 Compliance

***The Section ***_***508, § 1194.22 clause ***_*** is of particular importance when developing our pages.  It states that the following standards must hold true in our design:***
**  ****A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). **
**  ****Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. **
**  ****Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. **
**  ****Documents shall be organized so they are readable without requiring an associated style sheet. **
**  ****Redundant text links shall be provided for each active region of a server-side image map.**

**Notes:**
Notes:

## Section 508 Compliance

**  ****Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. **
**  ****Row and column headers shall be identified for data tables. **
**  ****Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. **
**  ****Frames shall be titled with text that facilitates frame identification and navigation.**
**  ****Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. **
**  ****A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.**

**Notes:**
Notes:

## Section 508 Compliance

**  ****When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. **
**  ****When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). **
**  ****When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. **
**  ****A method shall be provided that permits users to skip repetitive navigation links. **
**  ****When a timed response is required, the user shall be alerted and given sufficient time.**

**Notes:**
Notes:

## Section 508 Compliance

***There are several resources for Section 508 Compliance available to Web designers.  They include:***
**  **_[www.section508.gov](http://www.section508.gov/)_
**  **_[www.section-508-compliance.com](http://www.section-508-compliance.com/)_
**  **_[http://www.webaim.org/standards/508/checklist](http://www.webaim.org/standards/508/checklist)_
***In this redesign effort, dealing with 508 Compliance is simple - templates are already coded in such a way as to be entirely 508 compliant.  However, when changing elements of templates while designing a new page, it is critical to be sure to update table elements and alt tags in order to ensure that the content area remains 508 Compliant.***

**Notes:**
Notes:

## Section 508 Compliance

***Alt Tag Best Practices***
***When updating Alt Tag’s there are a few best-practice standards that should be adhered to.  The first is that all images that contain text should have an alt tag that restates all of the text, regardless of it’s length.***
***Another best practice is to properly label thumbnail / gallery images as “Photograph of...” or “Image of...”.  This allows an individual using a Screen Reader to understand that what is on the screen is, in fact, an image.***

- Food Safety Education

- Image of Ask Karen

## Section 508 Compliance

_***Skip Nav Demonstration***_
***We will now demonstrate why Screen Reader software is important, and how it interprets a Skip Navigation Link.***
***A Skip Navigation Link is code embedded within a page, usually in such a way as to appear invisible to a user viewing the page – this is typically accomplished by blending the code into the background.  However, a Screen Reader will read the code, and provide the user with the option of linking to an “anchor” above the content of the page and past the persistent navigation.***
***Since Screen Reader software will read all that displays on a given page, employing a Skip Navigation allows for users who are visually impaired to have more efficient access to the content of each page.***

**Notes:**
Notes:

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**Defect Tracking (9:15am – 9:45am)**
**Visual Source Safe (9:45am – 10:15am)**
**Browser / 508 Compliance (10:15am - 11:15am)**
- Section 508 Compliance
- Browser Compliance
**Exercise / Review (11:15am – 12:00pm)**

**Notes:**
Notes:

## Browser Compliance

***Analysis of the FSIS Web site audience has shown that multiple Web browser programs are used, including Microsoft Explorer and Netscape.  For example, the usage percentages for the month of January were:***
***  *****88% using Microsoft Explorer**
**   ****6% using Netscape**
**   ****4% using other Browser products**
**   ****2% AOL, Lynx, Mosaic, WebTV**

**Browser Compliance**

**Notes:**
Notes:

## Browser Compliance

***Pay particular attention to certain elements, including html borders, table attributes, and alt tags when viewing these elements.  It is essential that pages are coded in such a way as to be accessible for all users, particularly those using either Explorer or Netscape.  While unit testing pages, it is suggested that they be previewed in both Explorer and Netscape.***

**Browser Compliance**

**Notes:**
Notes:

## Browser Compliance

***Whereas all browsers are capable of compensating for some faults in code, the later the version of any browser the less its given ability to display content according to a designer’s intentions despite any errors that may exist.  The redesign has been tested in the following browsers...***

**Browser Compliance**

| Machine Configuration | Netscape | Internet Explorer |
| --- | --- | --- |
| MAC / OS 9.x | 7.02 | 5.1.7 |
| Windows 2000 | 6.1, 6.2, 7.0 | 6.0 |
| Windows 2000  | 6.1, 6.2, 7.0 | 5.0 |
| Windows 2000  | 6.1, 6.2, 7.0 | 5.5 |

**Notes:**
Notes:

## Browser Compliance

***For example, the page below has been created in Internet Explorer 6.0, and upon first glance appears to be correct...***

**Browser Compliance**

**Notes:**
Notes:

## Browser Compliance

**Browser Compliance**

**Notes:**
Notes:

## Browser Compliance

***Again, it is important to note that all templates and current pages have been designed in such a way as to test correctly in all versions of Netscape and Windows Explorer.  Consequently, by using templates or previously created pages as a design source for future pages, developers should not have to make significant changes to the way in which pages are designed in order to maintain accessibility across various Browser packages and versions. ***
***A few quick tips:***
***  *****Be sure to update alt tags when developing a new page and / or changing images (also, be aware that alt tags do not always function properly in Netscape!)**
**  ****Define table, row, and table data using actual pixel width and height, not percentages**
**  ****Finally, remember to always test your pages in both Explorer and Netscape, and in all versions!**

**Notes:**
Notes:

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**Defect Tracking (9:15am – 9:45am)**
**Visual Source Safe (9:45am – 10:15am)**
**Browser / 508 Compliance (10:15am - 11:15am)**
**Exercise / Review (11:15am – 12:00pm)**

**Notes:**
Notes:

## Exercise: Creating a Page

***Try to create a new biography page of Dr. Swacina using a completed content submission worksheet and the similar Dr. Elsa Murano page as a template. ***
**Create a new folder in C:/fsis/about_fsis/ called testuser# (number assigned by instructor).**
**Use the Get Latest Copy function in source safe to copy the Dr. Murano folder’s contents into your testuser folder. Make sure to make the files writeable. **
**Change the file names to fit the naming convention. For example, the content file would be named content_testuser#.asp**
**Update the index file to include the new title, meta tags, and include filenames.**
**Update the breadcrumbs in the section_header file using the sitemap as a guide. **
**Change the right navigation to have the correct bullets selected and verify all links are working properly. **
**Use the content submission worksheet to insert the correct content in the content file. **
**Use the HomeSite spell checker, link verification, and compile functions to test the code. Then unit test in the browser. **
**When the page is complete, save everything and add the file to VSS. **
**Create a mirror of the testuser# folder in the test environment, E:/fsis/about_fsis/**
**Now use Get Latest Version in VSS to put a read only copy of the files in test. **

## Training Progress

**Training Progress**

_**Content Creation**_

_**Page Development**_

_**Testing**_

**HTML / ASP Develop.**
**Home Site HTML Editor**
**Style Guide**
**Visual Source Safe**
**Templates**
**Defect Tracking**
**Site Map**

**Site Map**
**Templates**
**Content Submission Worksheets**
**Style Guide**

**Defect Tracking**
**Visual Source Safe**
**Browser / 508 Compliance**
**Style Guide**
**Site Map**

***Finished Page***

- If errors...

- If no errors...

**Notes:**
The Style Guide fits into all areas as it sets guidelines for how content will be designed on the page.  In order to properly develop and test a page, the Style Guide will also be needed.