FSIS Redesign Project

1

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

2
Agenda

• Training Agenda (900am 915am )
• HTML / ASP Development (915am 1130am)
• Homesite HTML Editor (1130am 1200pm)

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
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 Template Defect Tracking
If errors
If no errors
Testing
Defect Tracking Visual Source Safe Browser / 508
Compliance Style Guide
5
First Generation Web Development
Content Page Creation
Finished Page
Content Page Creation
Content Page Creation

• Developer organizes content based upon a
  request for posting.
• Developer selects design based upon prior
  postings local to new Web page
• Developer unit tests according to local
  standards and posts Web page

Finished Page

• Developer organizes content based upon a
  request for posting.
• Developer selects design based upon prior
  postings local to new Web page
• Developer unit tests according to local
  standards and posts Web page

Content Page Creation
Finished Page

• Developer organizes content based upon a
  request for posting.
• Developer selects design based upon prior
  postings local to new Web page
• Developer unit tests according to local
  standards and posts Web page

6
First Generation Web Site Production

• First Generation Web Site Production Process
• Since pages are created by a single person, the
  process generally takes less time to post a given
  page to the public site.
• Adherence to common Departmental standards is
  not required.
• Lack of uniform, formal standards in
  development, design, and process.
• Pages can be moved to production without formal
  review.
• Look and feel of site varies across different
  pages.

7
Best Practices Web Development
Content Creation
Testing

• Author of content selects appropriate template
  for page
• Author of content completes corresponding
  Content Submission Worksheet using mandated Style
  Guide
• Content Submission Worksheet is submitted to
  Web Developer

• Page tester evaluates page for defects,
  including content issues, style discrepancies,
  coding errors, Browser / 508 non-compliance, etc.

If errors
If no errors
Page Development

• Web designer selects design template requested
  by Content Submission, and completes initial page
  development by adding content
• Web designer performs unit test, and submits
  page to testing environment.

Finished Page
8
Best Practice Web Site Production

• Best Practice Web Site Production Process
• Provides a consistent standard in design,
  development, testing, and production of the Web
  Site.
• Formalizes the review and posting process.
• Eliminates uncertainty of design by providing
  reusable templates leading to a repeatable
  process for development.
• Look and Feel is consistent across the site,
  easing user access and navigation.
• Results in higher consistency and quality, which
  ultimately lowers production costs and rework
  over time.

9
Agenda

• Training Agenda (900am 915am )
• HTML / ASP Development (915am 1130am)
• HTML Overview
• HTML Tags
• ASP
• Resources
• Homesite HTML Editor (1130am 1200pm)

10
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 Template Defect Tracking
If errors
If no errors
Testing
Defect Tracking Visual Source Safe Browser / 508
Compliance Style Guide
11
Agenda

• Training Agenda (900am 915am )
• HTML / ASP Development (915am 1130am)
• HTML Overview
• HTML Tags
• ASP
• Resources
• Homesite HTML Editor (1130am 1200pm)

12
HTML Overview

• What is HTML?
• HTML stands for Hyper Text Markup Language.
• Markup refers to the sequence of characters or
  other symbols that you insert at certain places
  in a text or word processing file to indicate how
  the file should look when it is printed or
  displayed or to describe the document's logical
  structure.
• HTML is the language used to create Web pages
  which can be viewed with a Web browser (like
  Netscape Navigator or Microsoft Internet
  Explorer.)
• HTML documents are plain-text files (i.e., ASCII)
  that can be created using any text editor. These
  files can also be created using a HTML editor
  (such as HomeSite).
• HTML files are made up of plain text and tags.

13
Agenda

• Training Agenda (900am 915am )
• HTML / ASP Development (915am 1130am)
• HTML Overview
• HTML Tags
• ASP
• Resources
• Homesite HTML Editor (1130am 1200pm)

14
HTML Tags and Attributes

• Tags are used to denote various elements within a
  HTML document.
• The format of a HTML tag is a left bracket (lt),
  the tag name and then a right bracket (gt). If
  additional attributes are used with the tag to
  perform a special function, they are included
  after the tag name but before the right bracket.
  Attributes can provide additional descriptions.
• ltTAG NAME attribute1 attributeNgtlt/TAG NAMEgt
• Tags are usually used in pairs -- with a start
  tag and an end tag. The end tag follows the same
  format as the start tag except that 1) a forward
  slash (/) immediately follows the left bracket
  and 2) attributes are not needed.
• Below is a basic sample tag that would create a
  visible link to the FSIS home page. The a href
  denotes a hyperlink, the defines what URL
  should be used for the link, the text between
  tags shows what will be displayed as the name of
  the link, and the lt/agt closes out the hyperlink
  tag.
• lta hrefhttp//www.fsis.usda.gov/
  classBodyTextBlackgtFSISs HomeSitelt/agt

15
Required Tags
The following tags are required for all standard
HTML documents
lthtmlgt ltheadgt lttitlegt Document title lt/titlegt lt/he
adgt ltbodygt Data to show on page lt/bodygt lt/htmlgt
Starts the HTML page Starts the head section of
the document Sets the title that will show in the
browser Title to show in the browser goes
here Ends the title command Ends the head
section Starts the body section Information that
will appear in the document Ends the body
section Ends the HTML page
16
Exercise Create a Page

• Lets create our first page using the tags from
  the previous slide.
• lthtmlgt
• ltheadgt
• lttitlegtFSIS Web Teams First Examplelt/titlegt
• lt/headgt
• ltbodygt
• This is the first page of the training session.
  It was created by the ltstronggtFSIS Web
  Teamlt/stronggt.
• lt/bodygt
• lt/htmlgt
• Now look at the page in the HomeSite browser.
  Notice the strong tag created bold text.

17
Using Comments

• Commenting code is a standard best practice and
  provides a guide to any developer that needs to
  update or use a file. Use comment tags to
  document your work as you build a page.
• The comment start tag looks like
• lt!--
• The comment end tag looks like
• --gt
• Anything that falls between these two tags will
  be regarded as a comment and will be ignored by
  the browser. Its generally a good idea to
  provide a comment at the beginning of the file
  describing the document. Lets add a
  lt!--comment--gt to the ltbodygt tag of our previous
  example and view it in the HomeSite browser.
• ltbodygt
• lt!-- Begins first page. This page displays a one
  line greeting. --gt
• This is the second page of the training session.
  It was created by the ltstronggtFSIS Web
  Teamlt/stronggt.
• lt/bodygt
• Notice that the comment does not display.

18
Basic Tags

• Below is a list of a number of basic tags

Lets see these tags in action with a sample page.
19
Example of Basic Tags

• lthtmlgt
• ltheadgt
• lttitlegtFSIS Web Teams First Examplelt/titlegt
• lt/headgt
• ltbodygt
• lt!-- Begins first page. You can't see this text
  in your browser because it's a comment --gt
• This is the first page of the training session.
  It was created by the ltstronggt Web
  Teamlt/stronggt.ltbrgtltbrgt
• The p inserts a double spaceltpgtlt/pgt space between
  text. ltbrgtltbrgt
• The br tag adds a break at the end of the line
  ltbrgt
• so a new lines starts. ltbrgtltbrgt
• The hr tag adds a long row across the page like
  this
• lthrgtltbrgtltbrgt
• Use the strong tag for ltstronggt bold lt/stronggt or
  the em tag for ltemgt italics lt/emgt. ltbrgtltbrgt
• The sub tag displays subscripted text like
  Versionltsubgt3lt/subgt does. ltbrgtltbrgt
• The sup tag can be used to display things like
  4ltsupgt5lt/supgt ltbrgtltbrgt
• lt/bodygt
• lt/htmlgt

20
Indentation

• Notice that in the example above, different lines
  of code are indented to different levels. Code
  should be indented, so that all the statements in
  the same logical level are in the same
  indentation.
• You can use spacing to spread out the text on a
  Web page to make it easier to read. The two
  types of spacing we will discuss are
• Starting a New Line
• Adding Spaces Between Items
• The main reason for indentation is readability
  and maintainability. Since many people may be
  editing a file or using it to create a similar
  file, properly indented code should be readable
  to anyone who opens the file.
• FSIS coding standards require code to be properly
  indented and aligned.

21
Nesting Tags

• Order of appearance is not important in HTML, but
  the order of placement is. When using multiple
  tag combinations together, it is important to
  nest them in order so that older browsers will
  read them correctly.
• The following is an example of bad tag nesting
• ltstronggtltemgt THIS CODE WILL CAUSE
  ERRORSlt/stronggtlt/emgt
• You would fix this example like this
• ltstronggtltemgtTHIS CODE IS PERFECTlt/emgtlt/stronggt
• Note You could have used either the ltstronggt or
  the ltemgt tag first, as long as that was also the
  tag you ended on.
• ltemgtltstronggtTHIS CODE IS PERFECT
  TOO!lt/stronggtlt/emgt

22
Common Character Entities

• Many punctuation characters have specific
  operations assigned to them in HTML, JavaScript,
  and ASP. This can cause a number of errors when
  using these characters to display normal text. To
  prevent these problems, punctuation marks are
  replaced with corresponding code.
• The most common character entities are listed
  below, but an easy way to find those not listed
  is to type the name of the character and the
  letters HTML in any major Web search engine

23
Creating Links

• The ltagt anchor tag is used to create links of all
  types. There are four types of links used
  frequently in the FSIS site redesign Hyperlinks
  to FSIS pages, Hyperlinks to external sites, Page
  Anchor Links, and mailto links. All links will
  have an ltagt lt/agt and any text located between the
  tags will be underlined unless an alternate style
  is defined.

24
Table Tags

• HTML Table tags provide a way to structure a
  document using rows and data cells. Most of the
  structure of the FSIS page is provided by a
  number of tables. Tables consist primarily of
  lttablegt, lttrgt table row, and lttdgt table data
  tags. TD tags must always exist inside TR tags
  and TR tags must always exist within Table tags.
  Neither can stand alone. Text to be displayed is
  always held inside the Td cells.

Defines a table Defines a row Defines a data
cell Contents of cell Closes data cell Closes
row Closes table
lttablegt lttrgt lttdgt Contents of Cell
lt/tdgt lt/trgt lt/tablegt
25
Table Attributes

• Attributes define what characteristics the table,
  tr, or td cell have. Some examples of table
  attributes are below

26
Table Attributes

• Below is an example of a table with each of the
  previously described attributes
• lthtmlgt
• ltheadgt
• lttitlegtFSIS Web Teams First Examplelt/titlegt
• lt/headgt
• ltbodygt
• lttable width368 height48 border1
  Cellpadding6 cellspacing1gt
• lttrgt
• lttd height24 classBodyTextBlackgtData
  Goes Herelt/tdgt
• lttd height24gtOther Data Goes herelt/tdgt
• lt/trgt
• lt/tablegt
• lt/bodygt
• lt/htmlgt
• Now, lets view this page in the browser.

27
Nested Tables

• An advanced use of tables is called nesting
  tables. Nesting tables places tables inside of
  tables to give the page more structure.
• Nesting tables allows development of complex page
  structures. One table can be used to give the
  document its overall structure, while a number of
  other tables can be used to format specific
  elements as needed. This allows a given page to
  have cells with different border widths,
  cellpaddings, cellspacings, background colors,
  and more.
• The best way to learn about table structure is to
  look at some of the redesigns more complex pages
  such as Template B, G, and H. Some Tips for
  nesting tables
• When nesting tables, each additional table is
  always contained inside lttdgt tags.
• To place tables side-by-side, place each table
  tag in its own lttdgt tag.
• To stack tables, place two tables in the same
  lttdgt tag without creating a new row.

28
Nested Tables Example

• Side by Side Tables
• lttable border"1" width"360" bordercolor"black"gt
  
• lttrgt
• lttdgt
• lttable border"2" bordercolor"red"
  width"180"gt
• lttrgt
• lttdgt
• First Nested Table
• lt/tdgt
• lt/trgt
• lt/tablegt
• lt/tdgt
• lttdgt
• lttable border"3" bordercolor"green"
  width"180"gt
• lttrgt
• lttdgt
• Second Nested Table
• lt/tdgt
• lt/trgt

29
Nested Tables Examples

• Here are a few different examples of tables. See
  if you can create them.
• Source code for these can be found in the
  c/fsis/wwwroot/training/code_examples.asp file.

30
List Tags

• List Tags can also provide order to your page.
  The code below placed in the Body of an HTML
  document would create a numbered list with three
  items
• Coding checklist
• ltolgt
• ltligtAlways comment codelt/ligt
• ltligtIndent lines to give order to codelt/ligt
• ltligtClose all open tagslt/ligt
• lt/olgt

31
Tables on an FSIS Page
32
Form Tags

• Forms provide an opportunity for user input.
  There are a number of different tags which can be
  used to interact as needed.

33
Image Tags

• To insert images into an HTML document, use the
  ltimggt tag. Below is an example
• ltimg src/fsis/images/thumbnail_thermy.gif
  height80 width70 titleThermy
  altThermygt
• It is not necessary to give an ltimggt tag an end
  tag. The most common image attributes are

34
Meta Tags

• Meta tags provide information that help search
  engines and indexes define a document. For FSIS
  pages, two meta tags are used, description and
  keyword meta tags, to help search engines find
  the page.
• The contentdescription attribute provides a
  description of the documents. The following is an
  example
• ltmetadescription contentThe Food Safety
  Education Page provides information on a number
  of food safety education topics and programsgt
• The contentkeywords attribute provides
  keywords.
• ltmetakeywords contentFSIS, Food Safety
  Education, FSIS Education Programsgt
• Please Note A USDA meta data model is currently
  being developed. Once the model becomes a
  standard, FSIS will need to adapt to the defined
  standards.

35
Cascading Style Sheets

• Cascading Style Sheets (CSS) are another powerful
  way to layout and format an HTML document.
• Originally HTML was designed to define the
  content of a document, and the layout of the
  document was supposed to be taken care of by the
  browser. Over time, demand for more control over
  document format led to the development of
  formatting tags like ltfontgt, ltbordercolorgt,
  ltbgcolorgt, and many others. The development of
  these tags improved the format of a document, but
  caused difficulties in separating formatting from
  content. To alleviate this problem, cascading
  style sheets were born.
• Styles define how to display HTML elements.
• Styles are normally stored in Style Sheets.
• External Style Sheets eliminate the need to add
  each element of a style to tags. Instead,
  external Style Sheets are stored in CSS files and
  multiple style definitions will cascade into one.
  
• Despite their enormous functionality, styles are
  actually incredibly easy to use!

36
Adding Styles to a Document

• Styles provide great functionality but are very
  easy to create and use.
• In general, all styles are stored and created in
  a style sheet file. The file format always ends
  in the .css file ending.
• The FSIS style sheet is called /fsis/wwwroot/main/
  main_2.css. All global styles can be found in
  that file.
• To the right is a screen shot of the CSS file
  opened in HomeSite.
• Notice the attributes that are defined for the
  styles margin, padding, font-size, etc.

37
Creating a Style

• Many times, there are certain styles that are
  created for a given site. Create styles in the
  main_2.css file.
• The name of a custom style always begins with the
  period .
• Attributes are opened with the and closed
  with the
• Attributes are then listed and each attribute
  definition must end with a
• Below, the BodyTextBlue style is defined. This
  style is used often in the right navigation.
• .BodyTextBlue
• FONT-FAMILY Verdana, Helvetica, Arial
• font-size 10px
• font-weight normal
• color 000099

38
Using a Style Sheet

• Two elements are required in an HTML page to use
  CSS a reference to the style sheet and the
  definition of a given class when you want to use
  it.
• Reference the style sheet in the head of the
  document. In redesign files, this is already done
  for you in the index.asp file. The line below
  references the style sheet
• ltlink href/FSIS/Main/main_2.css"
  rel"stylesheet" type"text/css"gt
• To use a style, insert the class attribute into
  the table data cell where you want the style to
  appear. Below, we want all the text in this cell
  to use the BodyTextBlack style, which is the
  style used for body text of all documents in the
  redesign.
• lttd width"262 class"BodyTextBlack"gt
• Note that although the width attribute is also
  used, the only attribute required to use CSS is
  the class attribute.

39
Common Styles

• Below is a table listing the most commonly used
  styles in the redesign.

40
Agenda

• Training Agenda (900am 915am )
• HTML / ASP Development (915am 1130am)
• HTML Overview
• HTML Tags
• ASP
• Resources
• Homesite HTML Editor (1130am 1200pm)

41
ASP Overview

• Active Server Pages (ASP) is a Microsoft
  technology that allows for the programmatic
  construction of HTML pages just before they are
  delivered to the browser.
• HTML pages are static. All HTML code is written
  into a file by the developer. When the clients
  browser requests a page from the server, all the
  HTML code written into the file is sent to the
  browser and interpreted by the browser.
• Using ASP, dynamic pages can be created. When a
  page is coded in ASP, the file contains
  instructions that will be executed by the server
  when the page is accessed. When the clients
  browser requests a page, the server executes the
  ASP instructions and then returns HTML code to
  the browser.
• While HTML provides formatting on the Web, ASP
  builds functionality into Web pages that cannot
  be achieved with HTML, for example
• Display pages that are customized based on the
  users identity and preferences
• Recognize and display content based on browser
  type
• Access to information contained in databases,
  text files, XML files.

42
ASP Syntax

• ASP portions of a page use a different syntax
  than HTML.
• This symbol is used to open lt an ASP section of
  code, while this symbol gt is used to close that
  block of code. Lets write our first line of ASP
  code, which will display the current time
• lt
• Response.Write("The time is now ")
• Response.Write(time())
• gt
• Save the page as mytime.asp.
• When you open this page in the browser, youll
  see that nothing is displayed. This is because
  the page is not an HTML page, and must run
  through the server before being displayed. To get
  it to display properly, the page needs to be
  placed in a folder that the server recognizes as
  a local Web server. Lets move the file to the
  folder C/fsis/wwwroot/
• Now type this address in the browser
  http//localhost/fsis/mytime.asp.
• The page now displays the ASP code. The server
  recognizes the wwwroot as the default local Web
  server directory. The localhost portion of the
  URL tells the browser to use the machines local
  directory to serve the page.

43
ASP vs. HTML

• Lets look at the previous example
• lt
• Response.Write("The time is now ")
• Response.Write(time())
• gt
• Compare this code to the HTML code below
• ltbodygt
• The time is now 1115 AM
• lt/bodygt
• What separates the ASP from the HTML is the
  time() argument. The time argument checks the
  servers clock and outputs the current time to the
  browser. While the HTML page will always display
  1115 as the time, the ASP coded page will
  display the current time.

44
ASP at FSIS

• For the FSIS project, ASP is primarily used to
  add common navigational elements to the pages.
• Server-side includes give you a way to insert the
  content of another file into a file before the
  server processes it.
• Example Create a file called MyFirstInclude.asp
  in the C/fsis/wwwroot folder and insert the
  following code
• ltbodygt
• The contents of the included file will go here
• lt!-- include fileSecondFile.asp--gt
• lt/bodygt
• Create a second file called SecondFile.asp as
  follows
• ltbodygt
• This was typed into the second file to be
  included into the first file.
• lt/bodygt
• Now open the page http//localhost/fsis/MyFirstInc
  lude.asp in your browser.
• You can also create includes using a virtual path
  to a file name using the following syntax
• lt!-- include virtual/filepath/filename.asp--gt

45
Agenda

• Training Agenda (900am 915am )
• HTML / ASP Development (915am 1130am)
• HTML Overview
• HTML Tags
• ASP
• Resources
• Homesite HTML Editor (1130am 1200pm)

46
Using the Web to find Tag Help

• The Web is a great resource for finding HTML,
  JavaScript or ASP help. There are thousands of
  pages, Web areas, and tutorials which can provide
  assistance.
• Search Engines The quickest way to find basic
  help is to type what youre looking for into a
  search engine. For example, if youre looking for
  HTML ltimggt tag attributes, type that into a
  search engine.
• W3C The World Wide Web Consortium sets standards
  for different Web technologies and provides full
  tutorials on just about every Web language
  including HTML, JavaScript, and ASP.
• Books The Wrox and OReily series books are of
  excellent quality and serve as invaluable
  reference for every Web Developer.
• HomeSite HomeSite provides support for a number
  of different languages and has built-in tag and
  attribute guidance.

47
View Source

• Another easy way to look up tags or formatting is
  to use the View Source feature of your browser.
• When you right click on a Web page, select the
  view source option.
• This will open up a text file in notepad showing
  all html formatting of the document.

48
Priceless Links

• Links to HTML Tags and Attributes from W3C
• A list of HTML Tags and their descriptions can be
  found here
• http//www.w3schools.com/html/html_ref_byfunc.asp
• A list of HTML Attributes can be found here
• http//www.w3schools.com/html/html_standardattribu
  tes.asp
• A number of ASCII characters can be found here
• http//www.w3schools.com/html/html_entitiesref.asp
  
• HTML Colors can be found here
• http//www.w3schools.com/html/html_colors.asp
• ASP 101 provides lessons and tutorials on a
  number of ASP topics
• http//www.asp101.com
• CSS Resources W3C offers a full CSS tutorial and
  support.
• http//www.w3schools.com/css/default.asp

49
Agenda

• Training Agenda (900am 915am )
• HTML / ASP Development (915am 1130am)
• Homesite HTML Editor (1130am 1200pm)
• Purpose behind using an editor
• How to use HomeSite
• Resources Available

50
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 Template Defect Tracking
If errors
If no errors
Testing
Defect Tracking Visual Source Safe Browser / 508
Compliance Style Guide
51
HomeSite 5.0

• Macromedia HomeSite 5.5 is a powerful code editor
  helping professional developers efficiently build
  reliable websites. The software provides
• Advance coding features enable developers to
  instantly create and modify HTML and ASP tags.
• Integrated tools allow you to validate, reuse,
  navigate and format your code.
• Project management, quality control and site
  deployment features help you efficiently build,
  deploy and manage your entire website.
• The software can help increase productivity with
  wizards that quickly create pages, tables, frames
  and JavaScript elements.

52
Agenda

• Training Agenda (900am 915am )
• HTML / ASP Development (915am 1130am)
• Homesite HTML Editor (1130am 1200pm)
• Purpose behind using an editor
• How to use HomeSite
• Resources Available

53
Why dont we just use FrontPage?

• WYSIWYG vs. HTML Editor
• Most developers get their start using a WYSIWYG
  (What You See is What You Get) editor or program
  such as FrontPage, Adobe PageMill, or Claris
  Homepage. These programs allow a developer to see
  what the end result will look like while the
  interface or document is being created, and the
  WYSIWYG program creates all tags needed.
• One of the trade-offs, however, is that an HTML
  WYSIWYG editor sometimes inserts the markup code
  it thinks is needed all on its own. For example,
  when an author uses a WYSIWYG to create a table,
  the program inserts a number of tags that are
  extraneous. These tags can wreak havoc on a page
  with advanced structure, especially when
  developing for a number of different browsers.
• To mitigate this, the developer has to know
  enough about the markup language to go back into
  the source code and clean it up. This process
  can take as much time or more time as creating
  the file in the first place.
• By contrast, HomeSite is a traditional editor
  that requires the developer to enter descriptive
  codes (or markup). While the developer needs to
  know more about HTML and the templates being
  used, the end result is cleaner, more
  maintainable code.

54
Agenda

• Training Agenda (900am 915am )
• HTML / ASP Development (915am 1130am)
• Homesite HTML Editor (1130am 1200pm)
• Purpose behind using an editor
• How to use HomeSite
• Resources Available

55
Using HomeSite

• HomeSite is easy to learn and use. In addition,
  the program has a number of internal help menus
  and some built-in tutorials on its use. This
  section will provide
• Directions for setting up HomeSite for use with
  the FSIS Development environment
• An overview of few key dropdown features
• Use of the edit and browse windows
• A description of key toolbar items and
• How to use HomeSite features to follow the coding
  standards checklist.

56
Setting Up HomeSite

• General Settings
• There are a number of settings that should be set
  up before using HomeSite for the first time.
  These can be found in the Options ? Settings
  menu. Many of the settings are personal
  preferences, but there are a number which are
  specific to the needs of the FSIS technical
  architecture and Web Team coding standards.
  Details of configuring HomeSite for Web Team
  members are detailed below.

57
Setting Up HomeSite

• Startup Menu
• The startup menu configures a number of default
  settings for HomeSite. Since development will
  always be done in the C/fsis/wwwroot/
  environment, set the startup menu to start in the
  C/fsis/wwwroot/ directory by entering that URL
  in the Always start in this folder.

58
Setting Up HomeSite

• Editor Menu
• The editor menu lets you set up Tag insight, a
  very powerful feature of HomeSite which
  automatically lists tags and attributes specific
  to the tag being typed. For example, if a user
  types lta to open the anchor tag, a dropdown list
  displays all the lta attributes such as href,
  access, class, etc. It is generally a good idea
  to set this to display after a 1 second pause. If
  there is an attribute dropdown list, but the
  attribute is not contained in the list, then the
  attribute is not supported by HTML 4.01 and
  should not be used.

59
Setting Up HomeSite

• Tag Insight and Completion
• Tag completion is a very powerful and helpful
  built in HomeSite function. If Tag completion is
  enabled, whenever a new tag is opened, such as lta
  hrefgt, an end tag lt/agt is automatically inserted.
  Leaving this feature on can help a developer
  remember to close a tag and can reduce typing.

60
Setting Up HomeSite

• Browse Menu
• HomeSite has a feature called browse which users
  your computers browser to view files inside a
  HomeSite window. Since the FSIS Web Team will be
  using ASP, the HomeSite browser must be
  configured to pass all files through the server
  to execute server side includes and other ASP
  tags. To enables this, check the Enable Server
  Mappings check box and add the C\fsis\wwwroot in
  the Map From field and http//localhost/fsis/ in
  the Map To field. Then hit OK, and apply.

61
Setting Up HomeSite

• Server Mapping (continued)
• When the Mapping window pops up, check the Enable
  Server Mappings check box and add the
  C\fsis\wwwroot in the Map From field and
  http//localhost/fsis/ in the Map To field. Then
  hit OK, and apply.

62
Setting Up HomeSite

• Validation
• Configuring validation will allow HomeSite to
  check against certain Web standards. The
  following versions should be checked HTML 2.0,
  3.0, 4.0.

63
Search and Replace Dropdowns

• Extended Find
• Extended find is a useful tool which can find
  code throughout the document.
• Extended Replace
• Extended replace can be used to replace sections
  of code which appear in many files. This feature
  cannot be undone. In general, this feature should
  be used sparingly, since changing something in
  every file can lead to disastrous results. Some
  projects have spent weeks fixing errors caused by
  a careless global replace (of course, this also
  provides a very strong case for using Visual
  Source Safe of another form of version control,
  so that an archived version of a file could be
  reverted to).

64
Viewing the File Navigator

• View
• Resource Windows It is a good idea to view the
  Files 1 (Primary) files.

65
Opening Files

• To open a file, browse through the directory tree
  and find the folder you need. The files contained
  in the folder will appear in the window the file
  navigator window. All files for development are
  contained in the C/FSIS/wwwroot directory.
• Files with Red Dots
• When you open a folder, the files may have red
  dots next to them. If they do, you will need to
  use Visual Source Safe (VSS) to check out the
  files. For more details on this, see the section
  on Checking Out files in the VSS section of the
  training documentation.

66
Edit / Browse View

• Edit Mode
• Allows you to edit the contents of the file. If
  you are unable to edit the content in this view,
  the file may be opened in read only mode. If this
  is the case, you will need to Check Out the file
  using Visual Source Safe.

67
Browse View

• Browse
• Toggle to the browse menu and you will be able to
  view the page as if you opened it in a browser.
  If there are errors, it will display them as
  Internet Explorer would. If the settings are
  working correctly, the entire page should be
  viewable from the index.asp file which ties all
  the Server Side Includes together.

68
Code Color Guidance

• Color Coding
• As you can see, the different tags in HTML are
  color coded by HomeSite. This helps you tell if a
  tag has been validated. Validation is the process
  by which HomeSite checks against HTML standards
  to determine if you have coded an HTML tag
  correctly. Tags which are missing lt gt or contain
  invalid names will not display correctly, so
  color can be very useful in verifying your tags
  are correct.

69
Left Side Toolbar Items

• Close Active Document Closes the document open
  in the editor window.
• Split Current Document Allows navigation to two
  places in the same document.
• Word Wrap Shows all text within the viewable
  area of the file, allowing lines to break for
  greater visibility.
• Show Gutter Adds/Removes the gray space to the
  left of the navigation window.
• Show Line Numbers in Gutter Adds/Removes line
  numbers. Line numbers are very useful for
  debugging and error tracking.
• Show Hidden Characters Shows all markup such as
  spaces, paragraph breaks, tabs.
• Full Screen Removes the top and bottom navs to
  provide more screen area.
• Show Open Doc List Displays a list of any
  documents open to allow for quick navigation
  between files.
• First, Previous, Next, and Last Document Improve
  navigation.

70
More Left side Toolbar Items

• Indent Creates a five space indentation. This
  can be very useful when aligning large blocks of
  text is necessary, since it can be used on
  multiple lines.
• Unindent Removes a five space indentation. This
  can be very useful when aligning large blocks of
  text is necessary, since it can be used on
  multiple lines.
• Tag Insight Tag insight provides a drop down of
  suggested attributes for a given tag after it is
  typed.
• Tag Validation When turned on, the tag validator
  tells the developer whether a tag is valid in a
  given set of standards. The validator will check
  against a number of different languages which can
  be configured from the settings menu.
• Show Browser Below Editor This opens a browser
  window at the bottom of the page.
• Macros On/Off, Play, and Macro Manager A macro
  is a set of repeatable steps which can be
  played. Macros can be used to insert blocks of
  code which are commonly used. For example, if the
  same table is used to hold all content divider
  graphics, one could create a macro which codes
  the content divider, then play the macro to
  insert the content divider whenever needed on the
  site. This can be very useful in automating steps
  which are repeated many times.

71
Coding Standards Checklist

• The coding standards document provides a complete
  guide and can be found on the shared drive in the
  directory called 6-Technical Design. All
  developers should read it first and complete
  details and examples can be found there.
• A good checklist to use before considering a page
  complete is as follows
• Check that all files follow the file naming
  conventions and uses meta tags properly.
• Replace ltbgt, ltigt, ltugt, ltfontgt, and other
  deprecated tags with ltstronggt, ltigt, or styles.
• Spell Check using F7 in HomeSite.
• Ensure Code is properly aligned and indented.
• Compile and Debug all code.
• Verify links.
• Use alt and title tags for all visible images.
• Unit test the code in the browser. When the page
  is complete, log the action in the issue tracker,
  check the file back into Source Safe from
  development, and get the latest version from
  Source Safe to test.

72
Coding Standards Checklist

• Replace ltbgt or ltugt tags with ltstronggt tags and
  replace ltigt tags with ltemgt tags.
• Eliminate the need for ltfontgt tags using the
  appropriate style.
• Check that all file names follow the file naming
  convention described in the coding standards
  document.
• Check that the index page loads in the browser
  without error.
• All visible images and text images must have
  descriptive alt and title tags. Spacers and
  content dividers do not need them.
• There should be two meta tags. The meta
  namedescription and meta namekeywords
  should always be present in that form. The
  contentXX portion is specific to each page.
  Examples
• ltmeta name"description" content"List of FSIS
  Directives, Series 12,000- Voluntary Inspection,
  which provide official communications and
  instruction to Agency personnel to carry out
  their functions."gt
• ltmeta name"keywords" content"FSIS, Food Safety,
  Directives, Series 12,000gt
• Before reusing a file on a number of pages, have
  someone else review it in a browser.

73
Coding Standards Checklist

• Ensure all code is properly indented and aligned
  
• In general, this means that an tags should be
  opened and closed on different lines but in the
  same column such as
• lttablegt
• lttrgt
• lttdgt
• ltimg srcgt
• lt/tdgt
• lt/trgt
• lt/tablegt
• Compile all code and debug
• A page can often look complete on a new browser
  but have numerous errors on older browsers. In
  addition, files which comprise one part of a
  larger file may have code errors that will cause
  problems when the entire file is served together.
  Because of this, code should always be compiled
  before closing a file. The compiler checks that
  all open tags are closed and that all standards
  have been followed.

74
Coding Standards Checklist

• Compiling Code and Debugging (continued)
• To compile, use ShiftF6 in HomeSite.
• The errors will appear at the bottom of the
  screen with the line number and error
  description, as below. Double click on an error
  and it will bring you to the line containing the
  error. Fix each error and compile the file again
  using ShiftF6. Many tags have been deprecated,
  or retired, and therefore should not be used. The
  most common deprecated tags are related to
  styles.

75
Coding Standards Checklist

• Compiling Code and Debugging (continued)
• When all errors have been debugged, the compile
  window will display the No Errors or Warnings
  message.

76
Coding Standards Checklist

• Verifying Links
• In addition to checking validation, HomeSite also
  has a Verify Link function in the Tools menu
  that prevents pages having broken links.
• The Verify Link function will check that all
  links, both internal and external, exist.

77
Coding Standards Checklist

• Verifying Links (continued)
• Before running link validator, it will need to be
  configured by using the button, which opens the
  set URL configuration menu. When this menu opens,
  enter the C\fsis\wwwroot as your root directory.
  This configuration should only need to be done
  once.

78
Coding Standards Checklist

• Verifying Links (continued)
• To run the Verify Links function, click on the
  arrow button of the Verify Link menu. The
  following window will display. Green checks
  indicate that the link is valid and red Xs
  indicate broken links. Double click on the link
  to go to the broken link. In the picture below,
  the goggle.com link is broken and should be
  fixed. When all links are shown in green, the
  pages links have all been validated.

79
Agenda

• Training Agenda (900am 915am )
• HTML / ASP Development (915am 1130am)
• Homesite HTML Editor (1130am 1200pm)
• Purpose behind using an editor
• How to use Homesite
• Resources Available

80
Available Resources

• HomeSite has a number of built-in help features
  in the Help Menu.
• Additional Assistance can be found on
  Macromedia's Web site
• HomeSite home page
• http//www.macromedia.com/software/homesite/
• HomeSite Tutorials
• http//www.macromedia.com/software/homesite/resour
  ces/tutorials/
• HomeSite Community Resources
• http//www.macromedia.com/devnet/server_archive/ar
  ticles/hs_community_resource.html

81
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 Template Defect Tracking
If errors
If no errors
Testing
Defect Tracking Visual Source Safe Browser / 508
Compliance Style Guide
82
FSIS Technical Architecture

• FSIS Technical Architecture consists of four
  environments
• Development Facilitates the creation and
  modification of the solution.
• Test serves as an area to functionally test the
  solutions individual components as well as
  testing the solutions interaction with already
  existing components to insure it meets the
  functional design and component interaction
  requirements.
• vRep Houses the Native Minds Natural Language
  vRep tool.
• Public Web Server (Production) house and will be
  an area for end-users to view the final solution.

83
Development Environment

• At minimum, a page follows a three stage
  lifecycle develop, test, and publish.
• All development work will be completed in the
  development environment. The purpose of this
  environment is to provide an area where
  developers can create custom source code to
  technically reflect functional wire frame design.
  In this environment, the developers will
  develop, create, and modify individual HTML,
  JavaScript, and ASP components.

84
Development Environment

• The development process will always follow these
  steps, which will be further detailed during the
  training.
• Log into Development server using a terminal
  services application. The Development server is
  now the developers desktop.
• Check out needed files from the Visual Source
  Safe (VSS) database to corresponding directory on
  the development directory C/fsis/wwwroot/
• Use HomeSite to develop new pages or edit
  existing ones.
• Unit tests by viewing the page either using the
  HomeSite internal browser or viewing the page on
  the corresponding http//localhost/fsis/ URL.
• Correct any defects found during unit test.
• When development and unit testing is complete,
  Check in the edited files to VSS.
• Use VSS to Get Latest Version to the
  corresponding Test folders, which are on
  E/fsis/wwwroot/.
• Update the defect/issue tracker and notify
  testers as appropriate.
• Testers will test the pages in test and record
  any remaining defects and return a response
  through the defect tracking tool.