# Presentation: 206516

## Creating A Web Site

- Dr. Mark Rodekohr
- Energy Information Administration
- January 2000

## Overview

- Introduction
- Some Examples of Creating Simple Web Sites
- Creating PDF files
- Developing Standards
- Advanced Topics (search engines, java, etc.)

## Introduction

- As we discussed in the previous session start by defining a purpose for your web site.
- This should be followed with a paper outline of the introduction or home page.
- Next identify a logical file structure that is designed to:
- Support the home page structure
- Make performance tracking simple
- Be as simple but as understandable as possible

## Common Purposes

- For corporate sites the purpose can be thought of as attracting and informing investors, attracting and informing customers, attracting and informing employees and attracting and informing suppliers.
- For government sites the purpose can be thought of as informing the public, attracting and informing employees, attracting and informing potential suppliers and attracting and informing potential bidders.
- You should note that I have not listed as a purpose “the creation of a better image for public officials”.  While this is a clear purpose for these elected officials I will not discuss the creation of these types of sites.

## Example 1

- After outlining the site start with Word.
- Create a web page in word.
- Add the hot links.
- Add some custom code to add the search feature.

## Example 1

## Layout

- Search is in the upper left (becoming a industry standard)
- Topics in the lower left.
- News on the right
- Contacts and file information on the bottom.

## Adding the Search Code

- To search all files on this site, enter words or phrases,
- separated by commas, then click the "Search" button.
- <center><form method="post" action="http://www.eia.doe.gov/search?NS-search-page=results">
- <input type="hidden" name="NS-search-type" value="NS-boolean-query">
- <input type="hidden" name="NS-max-records" value="22"><input type="hidden"
- name="NS-collection" value="EIAWEBT"> <input name="NS-query" size="22" value>
- <br> <input type="image" src="images2/VERITY.GIF" border="0"></form></center><br>

## Add Title and Meta Tags

- <TITLE>Petrobangla</TITLE>
- <meta name="description" content=“Petrobangla (Republic of Bangladesh) Petroleum and Natural Gas Production and Sales">
- <meta name="keywords" content="energy, oil, natural gas, petroleum, gasoline,
- diesel, jet fuel, distillate, Bangladesh, South Asia">

## Microsoft Can’t Help Itself

- <td width=274 valign=top style='width:205.15pt;padding:0in 5.4pt 0in 5.4pt'>
-   <p class=MsoNormal><b><span style='font-family:Arial;color:#333399'><!--[if gte vml 1]><v:shape
-    id="_x005F_x0000_i1065" type="#_x005F_x0000_t75" style='width:18pt;height:18pt'>
-    <v:imagedata src="./index_files/image004.gif" o:title="new8"/>
-   </v:shape><![endif]--><![if !vml]><img width=24 height=24
-   src="./index_files/image004.gif" v:shapes="_x005F_x0000_i1065"><![endif]><a
-   href="io\bids.htm"><span style='color:#333399'>Bids Being Taken</span></a></span></b><span
-   style='font-family:Arial'> – On January 11, 2000 Petrobangla announced that
-   bids will be taken on tracks 3 and 5.<span style="mso-spacerun: yes">
-   </span>Bidding will close on March 11, 2000.<o:p></o:p></span></p>
-   <p class=MsoNormal><![if !supportEmptyParas]>&nbsp;<![endif]><span
-   style='font-family:Arial'><o:p></o:p></span></p>
- What you see is just a small fraction of the code generated by using Word 2000 most is not necessary and will not appear if you use Word 97 leaving the task of editing the html much easier.

## File Structure

## Email Notification

- You will notice that I included a email notification feature.
- The feature has turned out to be very popular and works very well when there is relatively low bandwidth.
- On the EIA site we can send 5,000 messages out in under 3 minutes in the past it would have taken several fax machines all night to do this.
- In a typical month we send 250,000 to 300,000 email messages.

## Why Not Use Microsoft Front Page to Create Your Site

- You can and it works fairly well for small sites.
- It will get you a certain consistency for pages throughout your site.
- It also has a habit of adding unwanted and sometimes incorrect code to your pages.
- It is next to impossible to edit pages using anything other than front page.
- It can be very difficult to add the needed server extensions to anything other than a NT machine.
- That being said we will construct another web page using Front Page.

## Slide 14

## Slide 15

## File Structure

## Front Page

- Using their wizard we ended up with a lot of empty space and a site that required at least one more click than necessary which defeats the three click rule (I.e. design a site that only requires people to find the information they are looking for with three of less clicks).
- A good example of a site that does not follow the three click rule is the World Bank web site.

## PDF Files and Web Sites

- The first question is why bother with the portable document format files on your web site.
- There are several reasons:
- Given the existence of any popular word processing document they are easy to produce.
- Users do not have to purchase any software to view the files.
- They are easy to search.

## Creating the PDF is a one click operation

## Slide 20

## Slide 21

## Standards: A Necessary Evil

## Standards: Elements

- Policy statement for what products should be posted and how.
- Publication Styles (fonts etc.) – this could be replaced by using cascading style sheets.
- Acronyms and Jargon
- File naming conventions

- Data access (3 click rule)
- Directory structure and directory naming convention
- Graphics standards (which colors to use, the number of colors and graphics size)

## Advanced Topics: Search

- Most larger web sites include a search engine.  Since navigation of large sites is difficult this is a very important feature.
- Prices of these engines range from free to in excess of $30,000.  Often times you get what you pay for.

## Verity: Used by Many Web Sites

## Searches are Based on the Concept of Building Collections

## Search Results

## Were EIA is Going 

- The trouble with Verity and many other search engines is that there are many false positive results.
- Some Stanford students came up with a interesting and unique concept base the results of searches on two factors:
- What other people look at and how long do they spend on a site associated with a particular keyword.
- How many links exist to a particular page.

## Google Search Results

## Advanced Topics: Java

- Java scripts can be used to enhance navigation.
- Most scripts you need are free they are all over the web.
- They can be abused cute affects and just that cute affects and generally do not enhance content.

## Example: Mouse Over

## Mouse Over Code

**<HEAD><TITLE>U.S. Energy Information Administration</TITLE>**
**<SCRIPT language="javascript">**
**<!-- **begin button rollover script****
**function hiLiteOn(imgName) {**
**	****if (document.images) {**
**	****	****hiLiteImage = eval(imgName + "On.src")**
**	****	****document [imgName].src = hiLiteImage**
**	****	****}**
**	****}**
**function hiLiteOff(imgName) {**
**	****if (document.images) {**
**	****	****originalImage = eval(imgName + "Off.src")**
**	****	****document [imgName].src = originalImage**
**	****	****}**
**	****}**
**if(document.images) {**
**	****overviewOn = new Image()**
**	****overviewOn.src = "images2/overview_on.gif"**
**	****overviewOff = new Image()**
**	****overviewOff.src = "images2/overview_off.gif“**
**}**
**//-->**
**</SCRIPT>**
**</HEAD>**

## Java Menu’s (this even talks to you)

## Summary

- We created two sites using different tools and noted the advantages and disadvantages.
- The sites we created were generally consistent with the standards we discussed in the previous session.
- We quickly reviewed the need for your own standards.
- We reviewed some more advanced issues including the addition of search engines and the improved navigation through the use of Java.

## Conclusion

- Before you start to code:
- Define the purpose of your site
- Define the message or information you wish to present
- Sketch out your home page on a piece of paper and perhaps even your whole site on paper.
- Look at other sites with a similar purpose for ideas.
**Now you can start to code.**