Web Development Guidelines Resources for Creating a Web Site at Johns Hopkins


Web Guidelines Site Map

Glossary of Web Publishing Terms

This glossary defines many of the terms used in Web Publishing and Web development. Each entry is in the format:

term: definition
usage
URL for more info

Note: <+++> implies a more complex topic -- not suggested for novices
References and resources are included at the end.
<JHU> implies JHU Guidelines

: A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Accessibility <JHU> (top): Congress enacted legislation (Section 508) that requires all web sites funded by Federal dollars to be accessible by those with physical handicaps. The World Wide Web Consortium (W3C) (http://www.w3.org/) has guidelines that explain how to make Web content accessible to the widest possible audience (people using different hardware such as PDA, laptops, etc. as well as people with disabilities). You may also use Bobby WorldWide (http://www.cast.org/bobby/) to help identify changes that can be made to your pages so that users with disabilities can more easily use them. For more information select the Section 508 button at the top of this page.
Authoring Tools: These are software tools that can help simplify the process of creating Web pages
For more information about the software, follow the links below:
Dreamweaver: (http://www.macromedia.com/software/dreamweaver/)
Homesite: (http://www.macromedia.com/software/homesite/)
NoteTab (http://www.notetab.com/)
A comprehensive list of tools is available at http://builder.cnet.com/webbuilding/pages/Authoring/ProdTools/

Content Management System (CMS) (top): Software that enables one to add and/or manipulate content on a Web site. Typically, a CMS consists of two elements: the content management application (CMA) and the content delivery application (CDA). The CMA element allows the content manager or author, who may not know HTML, to manage the creation, modification, and removal of content from a Web site without needing the expertise of a Webmaster. The CDA element uses and compiles that information to update the Web site. The features of a CMS system vary, but most include Web-based publishing, format management, revision control, and indexing, search, and retrieval.

Cookies (top) <+++>

Cookies are a small piece of text information which an HTTP server can send to a browser to be stored. This same piece of information can then be transmitted back to the server from the browser when subsequent requests are made. The main use of cookies is to preserve "state" information, or information which can persist between requests to a server. An example of this use would be to send a unique identifier to a browser after a form is filled out. Subsequent requests for this form cause the unique identifier to be sent back. This allows the server to look up the original form information and use it.

Many users, especially those interested in medical conditions or sensitive subjects, may be reluctant to accept or return cookies to these web sites. web sites should be designed to function without error in the absence of cookies, even though this may require extra effort on the part of the user, to re-type information, for example:

Cookies that store or transmit information that falls under the HIPAA or FERPA Acts should do so from secure, encrypted servers.

At this time, the Johns Hopkins University has no official, universal policy on the use of cookies on web sites affiliated with the institution.

More technical information on cookies can be found at:

Definitions and technical aspects: http://www.ufaq.org/navcom/lyncookie.html
Privacy concerns: http://www.junkbusters.com/cookies.html
Web site devoted to cookies and privacy: http://cookiecentral.com/
Short page on cookies: http://isis.rte.ie/newradio/cookiedef.html

Counters (top)

Digital Millennium Copyright Act (DMCA) (top): The Digital Millennium Copyright Act, signed into law on October 28, 1998, amended the copyright law to provide limitations for service provider liability relating to material online. New subsection 512(c) of the copyright law provides limitations on service provider liability with respect to information residing, at direction of a user, on a system or network that the service provider controls or operates, if the service provider has designated an agent for notification of claimed infringement by providing contact information to the Copyright Office and through the service provider’s publicly accessible website. You can read Hopkins' DMCA policy (http://www.jhu.edu/news_info/policy/copyright.html).

Disclaimers <JHU> (top): Disclaimers and any legally related information should be refered to the University or Hospital legal department for approval before being added to a web site. Consider whether your site might need a disclaimer. For an example, see the Johns Hopkins Medicine (http://www.hopkinsmedicine.org/disclaimer.html) or School of Public Health (http://www.jhsph.edu/Resources/web_policies) web sites.

Family Educational Rights and Privacy Act (FERPA) (top): The Family Educational Rights and Privacy Act is a federal law designed to protect the privacy of a student's educational records. The law applies to all schools which receive funds under an applicable program of the US Department of Education. For more information select the FERPA button at the top of this page.

Font Families (top)

Although many computers have the same basic fonts preinstalled, you cannot guarantee this. Hence, it is advisable to provide multiple fonts for the browser to choose from. If the first choice is not available, the browser will look for the second, third, etc.

Always include a generic font as the last choice. The generic font names are serif, sans-serif, cursive, monospace, and fantasy.

Here are some examples using the font tag:

And here are the same examples using CSS:
font-family: Verdana Arial Helvetica sans-serif;
font-family: Georgia 'Times New Roman' serif;
font-family: Courier monospace;

For more information about fonts, see Webmonkey: Design: Fonts.

Font Size (top)

It is preferable to keep font types relative rather than absolute, so that visitors can adjust the sizes in their browsers.

With the font tag, use or instead
of or . With CSS, use font-size: 80%;
or font-size: larger; instead of font-size: 10pt; or font-size: 18px;

For more information about font sizes, see http://www.useit.com/alertbox/9707a.html.

Frames <++> (top)

There is much debate about frames. Read about the pros and cons of using frames, at http://www.yourhtmlsource.com/frames/goodorbad.html

Graphics (top): For usage check the Images section below.
For more information about software tools, follow the links below:
Fireworks: (http://www.macromedia.com/software/fireworks/)
Illustrator or Photoshop (http://www.adobe.com/web/main.html)
PaintShop Pro or WebDraw (http://www.jasc.com/)

Health Insurance Portability and Accountability Act (HIPAA) <JHU> (top): The Health Insurance Portability and Accountability Act (HIPAA) has as one of its main purposes the simplification and efficiency of the transmission of health information. But this simplification and efficiency is not to be at the expense of the security and privacy of the health information. The Act itself presents a balanced approach to these various purposes. For more information select the HIPAA button at the top of this page.

Home Pages(top): Provide enough information on your home page to describe your site, but avoid lengthy introductions that require only one-time reading.

HTML Editors(top): Check Authoring tools above.

Identification/Contact Information (top): It is helpful for a site (and ideally every page within a particular site) to identify its Web developer and content provider. For an example, see the BSPH contact page: (http://www.jhsph.edu/Contact/index.htm)

Images (top)

To keep page load time to a minimum, keep the size of a graphic (GIF and JPG) under 30 kilobytes and the total number of graphics on any page to a minimum. Including HEIGHT and WIDTH tags for all images helps them load faster.

Provide text equivalents for all non-text elements (e.g., images, image map regions, graphical representations of text, etc.) so that those who view your pages without images will be able to understand it.

For more information about formatting and optimizing for the web, see Webmonkey: Design: Graphics, or Web Reference: Optimizing Graphics.

Javascript <+++> (top): Since not all visitors have JavaScript or Java enabled on their systems, include the <noscript> code in a page that uses JavaScript so that visitors will know that the page requires JavaScript. Keep in mind that JavaScript rollovers take longer to load and will add to overall page memory.

Language Attributes (top): To assist search engines, speech synthesizers, spell checkers, and grammar checkers, identify the primary natural language of a document by setting the "lang" attribute on the HTML element. See the W3C's guidelines More info: http://www.w3.org/TR/html401/struct/dirlang.html#h-8.1

Links (top): It is preferable to use document-relative links instead of root-relative links as this makes your site more portable. The rationale behind this is that root-relative links are interpreted by servers, not by browsers. Therefore, if you open a local page that uses root-relative links in your browser, the links won't work.

Logos <JHU> (top)

The logo should appear somewhere on every page so that people know that they are still at a JHU site.

Johns Hopkins University
All departmental Web pages should carry the University logo. On home pages or splash pages, it should appear within the upper half of the 600 x 800 pixel screen. The University considers the logo to be a valuable asset which promotes the university and is a consistent, recognizable identity among our various constituencies. Under no circumstance is the logotype to be altered in any way. The University logo consists of the words "Johns Hopkins" above the word "University". Versions of the logo are also available that substitute the word Engineering, or Institutions, or Alumni for the word University. The logotype may be downloaded at http://www.jhu.edu/~design/stat.html.

Please note that the seal is NOT the University logo.

Johns Hopkins Medicine
http://www.hopkinsmedicine.org/graphicstandards/require.html#logo

Metadata(top): Adding metadata to your source code provides valuable information about the content of your web site. Some of their uses include identifying a page's creator, HTML specs, keywords, description, and refresh parameters. View the W3C's Metadata and Resource Description (http://www.w3.org/Metadata/) to learn more.

Navigation (top)

It helps to have consistent navigation on every page of your site so that visitors will find their way around your site. It is also helpful to include a link to the home page from every page in your site so that you don't have "orphan" pages.

It is advisable to keep the amount of clicking to a minimum. Ideally, a site's home page has direct links to all of its sub-pages so visitors only need to click 2 or 3 times from the home page to get to any page within the site. If this is not the case, you may want to consider restructuring your web site.

Finally, keep the amount of scrolling required on each page to a minimum.

Page Layout (top): It is advisable to set table widths so that visitors with small screens do not need to scroll right to read your page. Images or groups of images should not should be sized appropriately for that reason as well. In addition it helps to keep all or most of your information "above the fold" so that users do not have to scroll down excessively. To read more about page layout, visit http://www.wpdfd.com/editorial/wpd0601.htm.

Page Load Time (top)

It is preferable to keep the size of an HTML file under 32 kilobytes. If a Web page exceeds this size, consider creating multiple pages in place of the single file. There are exceptions to this guideline, however, like when you have media-rich pages.

Plugins (top) <++>

If an element on your page requires a plugin (e.g., Adobe Acrobat, Flash, Shockwave, Realtime, Quicktime, etc.), provide information on where the plugin can be obtained. Consider placing plugin detects in your code.

Resources and References (top): There are web development classes offered at Hopkins, and many resources available on the Web.

Site Maps/Indexes (top): Site maps/indexes provide helpful information about the layout of a site and are another helpful navigation tool for visitors.

Statistics (top): There are many tools available for analysis of web site traffic. Logging needs to be enabled on your web server to record visits. These log files are then analyzed by software such as Webtrends or Analog and reports are generated. Analysis of web site traffic is not an exact science, and there are those who feel Web Usage Statistics Are (Worse Than) Meaningless (http://www.cranfield.ac.uk/docs/stats/). .

Resources and References:

Classes

To enhance your web development skills, the Welch Medical Library offers
Web Publishing classes (http://www.welch.jhu.edu/classes/internet.cfm) and Web development classes (http://www.welch.jhu.edu/classes/webdev.cfm) as does the School of Professional Studies in Business and Education (http://www.spsbe.jhu.edu/). The Digital Media Center also has reference guides (http://webapps.jhu.edu/digitalmediacenter/Learning/References.cfm) that you may find useful.

Useful Web Sites

Before beginning any Johns Hopkins Institutions web project, please contact the appropriate office in your area for assistance with guidelines, standards or existing programs.

If there is any doubt about the methods for collecting, storing, or displaying sensitive information on web sites, the Johns Hopkins legal departments (410-516-8128) should be contacted for a definitive answer about Hopkins' liability and responsibility.