1 / 89

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

FSIS Re-design Project Web Site Maintenance Training Day 2 March 3, 2004. Agenda. Training Agenda (9:00am – 9:15am ) Site Map (9:15am - 10:00am) Templates (10:00am - 11:00am) Content Submission Worksheets (11:00am – 11:30pm) Style Guide (11:30am - 12:00pm). Training Agenda.

darshan
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Agenda Training Agenda (9:00am – 9:15am ) Site Map (9:15am - 10:00am) Templates (10:00am - 11:00am) Content Submission Worksheets (11:00am – 11:30pm) Style Guide (11:30am - 12:00pm)

  3. 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 Testing • Question & Answer

  4. Agenda • Training Agenda (9:00am – 9:15am ) • Site Map (9:15am – 10:00am) • Purpose / Elements Review • FSIS Site Map • Interplay between Site Map & Page Navigation • Exercise • Templates (10:30am – 11:30am) • Content Submission Worksheets (11:00am – 11:30pm) • Style Guide (11:30am – 12:00pm)

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

  6. Agenda • Training Agenda (9:00am – 9:15am ) • Site Map (9:15am – 10:00am) • Purpose / Elements Review • FSIS Site Map • Interplay between Site Map & Page Navigation • Exercise • Templates (10:30am – 11:30am) • Content Submission Worksheets (11:00am – 11:30pm) • Style Guide (11:30am – 12:00pm)

  7. Purpose / Elements Review A Site Map is a graphical representation of a Web site’s information architecture. It is used in order to sort Web content by subject and priority. Pages can be placed within a Site Map according to their general subject matter, specific content, or average relevance to a typical user of the site. 1st Level 2nd Level 3rd Level 4th Level 5th Level

  8. Purpose / Elements Review Every block on a Site Map represents an individual Web page, and each connection signifies a link existing between pages of the Web site. Any block that has multiple connections represents a page that links to several other pages. There are no maximum or minimum number of page links a page can have. Single page with one link Single page with three links

  9. Purpose / Elements Review Studies have shown that Web users expect content to appear according to an ordered hierarchy. The broadest areas of content are displayed first, with subsequent layers becoming increasingly specific. In the example below, a user can navigate from a broad topic page (Science), to a more specific topic page (Laboratories & Procedures), to an even more specific topic page (Accredited Laboratories). Broad topic area More specific topic area Most specific topic area

  10. Agenda • Training Agenda (9:00am – 9:15am ) • Site Map (9:15am – 10:00am) • Purpose / Elements Review • FSIS Site Map • Interplay between Site Map & Page Navigation • Exercise • Templates (10:30am – 11:30am) • Content Submission Worksheets (11:00am – 11:30pm) • Style Guide (11:30am – 12:00pm)

  11. FSIS Site Map Prior to creating a new architecture for the redesigned FSIS Web site, all existing content was audited, and then divided into relevant subject, topic, and audience areas. This process led not only to the creation of the Navigation elements of the page, but also mandated a structure for the FSIS Site Map to follow. There are three primary categories into which content can be divided, and multiple sub-categories within each of those areas. SubjectsFood Safety EducationScienceFSIS RecallsRegulations & PoliciesFood Safety & Emergency Preparedness AudiencesScientists & ResearchersConsumers & EducatorsBusinessesConstituent GroupsFSIS Employees GlobalsAbout FSISNews & EventsFact SheetsCareersFormsHelpContact UsEn Espanol

  12. FSIS Site Map By examining the Site Map, you can begin to see how content in the redesigned Web site has been organized. For instance, pages that would seem most relevant to be placed under the Subject of Science have been placed in this area, pages that would seem most relevant to be placed under FSIS Recalls have been placed in this area. In the Legend that is displayed on each page of the Site Map, you will notice codes for various types of pages in the redesigned Site. There are three types of pages that the Site Map will represent – FSIS pages, external pages, and pages that reside in another area of the site. 3.2 3.1.1.1.5 Science USAJobs Mobile Game

  13. FSIS Site Map 3.2 FSIS pages represent general pages that can be found within the architecture at the location they are represented on the Site Map. External pages represent pages from Web sites other than the FSIS site. Pages that reside in other areas are used in instances where the content of a page logically fits in two areas of the Web site – consequently it “resides” in one area but can be linked to from the other. Science USAJobs 3.1.1.1.5 Mobile Game

  14. FSIS Site Map 6.1 2004 News Releases 6.1.1 News Release Additionally, there are several places in the FSIS Site Map where you will notice several blocks stacked upon each other. This is a graphical representation of multiple pages at the same level. Typically, this graphical representation is used whenever there is an index page (in this case, the 2004 News Releases page) that contains links to a large number of sub-pages.

  15. Agenda • Training Agenda (9:00am – 9:15am ) • Site Map (9:15am – 10:00am) • Purpose / Elements Review • FSIS Site Map • Interplay between Site Map & Page Navigation • Exercise • Templates (10:30am – 11:30am) • Content Submission Worksheets (11:00am – 11:30pm) • Style Guide (11:30am – 12:00pm)

  16. Interplay Between Site Map & Page Navigation Site Maps can be used not only to help determine where a page “resides” within an information architecture, but as is the case of the FSIS redesigned site, they can also be used to help determine elements of individual pages.

  17. Interplay Between Site Map & Page Navigation The Breadcrumb Navigation represents the root of the respective page back to the Home page. Top / Global Navigation Area If the page resides within one of the global navigation areas, the image is changed to look as though it is pressed down. The Inner Header Bar will display the primary root of a page within the Site Map.

  18. Interplay Between Site Map & Page Navigation Left Navigation Area If a page resides within one of the Browse by Audience pages, the dropdown box displays the name of the Browse By Audience page. If a page resides within one of the Browse by Subject areas, a green image with white text is displayed under the Browse by Subject area of the left navigation bar.

  19. Interplay Between Site Map & Page Navigation Right Navigation Area The Heading tab for a Right Navigation indicates the primary area of the Site that contains the page that the user is viewing. In this example, the area is Food Safety Education. Similar Heading tabs exist for all Subject, Audience, and Global / Topic areas of the Web site.

  20. Interplay Between Site Map & Page Navigation Right Navigation Area (continued…) Items in the Right Navigation area are determined by the area in which the page resides. The Right Navigation area will display the local navigation for its respective page, and will change in accordance to which sub-page a user is viewing. While viewing a page below a primary landing page, the options below that page are displayed by and indented list.

  21. Interplay Between Site Map & Page Navigation Right Navigation Area (continued…) When moving to a lower level page represented by an indent, the bullet moves as well in order to indicate a shift in which page the user is currently looking at. Although there may be sub-pages below the indented level, no additional indents open within the right navigation area. If a user is viewing pages below this level, the respective element (in this case “Food Safety Mobile”) remains the bulleted item. Only one bullet can even be highlighted at any one time.

  22. Interplay Between Site Map & Page Navigation Right Navigation Area & Content Header Graphics In general, content header graphics will always correspond with whatever the bulleted item in the right navigation area is. In an instance where the user is viewing a sub-page below an indented item in the Site Map, a specific class of bolded text is used to indicate that page’s title just below the Content Header. Rules explaining how and when to use Content Headers and / or page titles written in HTML are explained more thoroughly in the Style Guide.

  23. Agenda • Training Agenda (9:00am – 9:15am ) • Site Map (9:15am – 10:00am) • Purpose / Elements Review • FSIS Site Map • Interplay between Site Map & Page Navigation • Exercise • Templates (10:30am – 11:30am) • Content Submission Worksheets (11:00am – 11:30pm) • Style Guide (11:30am – 12:00pm)

  24. Site Map Exercise • Test the elements of the following two pages (including the global navigation, subject area navigation, audience area navigation, right navigation, and breadcrumb), using only a Site Map. • The first page is the Current Openings page, and it can be found at 8.1 on page 27 of your Site Map. • The first page is the Why Join FSIS page, and it can be found at 8.1.2, also on page 27 of your Site Map.

  25. Site Map Exercise

  26. Site Map Exercise

  27. Agenda • Training Agenda (9:00am – 9:15am ) • Site Map (9:15am - 10:00am) • Templates (10:30am - 11:30am) • Page Components • File Structure • Content Submission Worksheets (10:00am – 10:30pm) • Style Guide (11:30am - 12:00pm)

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

  29. Template A • Template A: • Contains a two row, two column table at the top of the page displaying short text descriptions and related thumbnail images. • The bottom half of the page contains a two row, two column table displaying text blurbs. • This template is currently only used for the homepage.

  30. Template B • Template B: • Contains a two column table at the top of the page and text headers with supporting text below the two columns.

  31. Template C • Template C: • Template C has a two row, two column table at the top displaying text blurbs and related thumbnails. • The bottom half of the template consists of content header images and short text descriptions. • This template is used for global navigation area landing pages.

  32. Template D • Template D: • Displays a text narrative and is often used for press releases and speeches. • The inset box is an ASP include file and can be used to display highlights from the article or links to related topics.

  33. Template E • Template E: • The top of the page has narrative text wrapped around a thumbnail photograph. • This template is useful for biography pages and news articles or releases that feature a photo.

  34. Template F • Template F: • This template F begins with a drop down which allows quick navigation for files which are ordered by list, series, year, alphabet, etc. • The drop down allows the user to quickly navigate to another page in the same section. • The list of items is in plain and bolded text separated by breaks.

  35. Template G • Template G: • The top portion of the page includes a basic text intro inside a cell padded table. • The bottom portion of the page includes small text links and thumbnails in two column tables. • Each table is separated by a content divider image. • Notice that the right navigation is indented due to sub navigation items. This is not specific to the template but shows an example of indented navigation.

  36. Template H • Template H: • The top of the page displays a short text intro inside a cell padded table. • The bottom content of the page displays a table. It is important to note that the total width of the table cells and padding cannot exceed 368 pixels.

  37. Template I • Template I: • Template I begins with a short narrative under the content header image. • There is no right navigation, allowing for the use of a wider table. • The items in the right navigation are moved to and expanded left navigation bar.

  38. Template J • Template J: • This template begins with a short narrative intro under the content header graphic. • There is a content divider image under the bolded text header. Please note that content divider images cannot be inside a table with cellpadding. • Below the content divider image, a series of thumbnail images with associated links are displayed in table rows.

  39. Template K • Template K: • This template is used to display expanded images of thumbnails while retaining the navigational structure of the site.

  40. Template L • Template L: • This template provides the basis for creating forms across the site. • This basic form can be used to solicit a number of inputs from the user. The only configuration required would be to change the names of the input fields. • Note that the state option box provides a good model for creating form dropdowns.

  41. Template M • Template M: • Template M is another format for a form. Instead of using a single column for input, two columns are used to allow for a shorter overall Web page. • The top of the page consists of two columns containing a search box and dropdown boxes. • The bottom of the page contains a narrative. • Note that the right navigation contains a narrative instead of local navigation items.

  42. Template N • Template N: • This template has a child window which can be used for popup items.

  43. Template O • Template O: • This template does not contain the common navigational elements of the rest of the pages. It is used for printer friendly pages.

  44. Agenda • Training Agenda (9:00am – 9:15am ) • Site Map (9:15am - 10:00am) • Templates (10:30am - 11:30am) • Page Components • File Structure • Content Submission Worksheets (10:00am – 10:30pm) • Style Guide (11:30am - 12:00pm)

  45. What’s in a page? • Page components: • Index: Entire file • Main Header • Global Navigation Header • Left Navigation • Section Header Image • Section Header • Content • Right Navigation • Footer

  46. File Naming Convention • Each page consists of a number of included files. Those may include: • Leftnav • Rightnav • Header (contains banner image and global navigation bar) • Section_Header (contains the breadcrumbs and a link to the section header image like “Fact Sheets”) • Section_Header_Image (contains only the section header image like “Fact Sheets” • News_Article_Inset (only for template D. This file contains the contents of the inset news article on template D). • Content (Contains the bulk of page content, as would appear in the center column. Use the content page of the Templates file to change to Template A, B, C… etc.). • Promo/adrotator.asp (This include file holds the rotating promo and can be referenced from the promo file. Each section of the site has a different promo to rotate as needed for that section). • Index.asp (index ties all of the above components together using include files).

  47. File Naming Convention • All files and folders across the site follow a consistent naming convention. • Each page is contained in its own folder named with the page name. The page name can be found on the Site Map or in a Content Submission Worksheet. • Words in the filename are separated by the underscore. For example, the folder for the Food Safety Mobile page would be titled Food_Safety_Mobile, and all files specific to that page would be in that folder. • You will need to change include file names to match the name of your pages. For example, section_header_home.asp is the name of the section header for the 1.0 home page. • Each file is named after the directory that it’s in with the underscore used to separate elements. For example, the different files in the Food Safety Education directory would be named: • Content_Food_Safety_Education.asp • Rightnav_Food_Safety_Education.asp • Index.asp • Section_header_Food_Safety_Education.asp • NOTE: This file does not have its

  48. File Types • Index File: • Name: index.asp • Location: Local file folder • Function: The index file brings together all other files which comprise a page using the ASP include function. • Changes Required during development: • Page Title • Meta Tags • Include file names should reflect local file folder name

  49. File Types • Main Header • Name: header_main3.asp • Location: /fsis/main/ • Function: Contains the mast head image and its links. • Changes Required during development: None

  50. File Types • Global Navigation Header • Name: header_globalnavarea.asp or header_main_globalnavarea.asp • Location: • Global navigation folder. • If the file is part of an area outside of the global navigation area, the file is called /fsis/main/header_main.asp. • Function: This file contains the global navigation for the site including mouse-overs and links to global navigation home pages. • Changes Required during development: These pages should all be coded to date. For the top level page in a given global navigation area (Home, About FSIS, News & Events etc.) use the “header_main_globalnavarea.asp” file, for the files below that level, use the “header_globalnavarea.asp” file.

More Related