FSIS Re-design Project Web Site Maintenance Training Day 3 March 4, 2004

FSIS Re-design Project 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)

Training Agenda 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 Web site. • Day 1 Topics • HTML / ASP Development • Homesite HTML Editor • Day 2 Topics • Site Map • Content Creation • HTML / ASP Templates • Style Guide • Day 3 Topics • Defect Tracking • Version Control • Browser / 508 Compliance (10:15am - 11:15am) Testing • Question & Answer

Training Progress Finished Page Content Creation Site Map Templates Content Submission Worksheets Style Guide Page Development HTML / ASP Develop. Home Site HTML Editor Style Guide Visual Source Safe Templates Defect Tracking Site Map If errors… If no errors… Testing Defect Tracking Visual Source Safe Browser / 508 Compliance Style Guide Site Map

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 • 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.

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:/.

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 • 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)

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.

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.

FSIS Re-design Project Web Site Maintenance Training Day 3 March 4, 2004

FSIS Re-design Project Web Site Maintenance Training Day 3 March 4, 2004

Presentation Transcript

Web Site Design

Web Site Design

Web Site Design

FSIS Re-design Project Web Site Maintenance Training Day 2 March 3, 2004

Web Site Design

FSIS Re-design Project Web Site Maintenance Training Day 1 March 4, 2004

Web Site Design

LIS650 lecture 3 Web site design

Web Site Design

Web Site Design

Web Site Design

Web Site Design

March 4, 2004

March 4, 2004

Web re-design

CareCenters Web Site Re-design

Client: Dana Mrkich | Site: danamrkich Project: Web development, design and maintenance.

Web Site Design

LIS650 lecture 3 Web site design

Web Site Re-design

March 3, 2004

4 March 2004