PBDS 660: Introduction to Hypermedia

"The Web Standards Project (WaSP) is a coalition of web designers and developers advocating specifications ('standards') that reduce the cost and complexity of site creation and ensure simple, affordable access for all" (Zeldman, p. 19).

Web Standards specify how aspects of XHTML, XML, CSS, ECMAScript, and the Document Object Model (DOM) should be parsed by standards-compliant browsers. Standards

• allow Web sites to be more portable (work across platforms) and the information they display to be found more easily;
• help diminish the "cycle of obsolescence" and enable sites to be "forward compatible."

Zeldman defines forward compatibility as ensuring that if they are "designed and built the right way, any page published on the web can work across multiple browsers, platforms, and internet devices -- and will continue to work as new browsers and devices are invented" (Zeldman, p. 15).

Different strokes for different folks, er, browsers: it all begins with DOCTYPE.

Every browser has two basic modes of operation, two sets of rules it can apply to determine how to display any given markup file:

1. Strict mode
2. Quirks mode

Unless you specify otherwise, your markup will be treated to the quirks, whatever they happen to be, for the browser your user is using. Quirkiness means replicating the bad old days of yucky, non-standard HTML and DOMs. Ya don't want to go there, believe me.

To specify otherwise, you need to begin every document with a DTD (Document Type Declaration): aka DOCTYPE. There are three main DOCTYPES in use for Web pages:

1. Strict: allows only well-formed XHTML elements
2. Transitional: allows all XHTML elements and tolerates a few deprecated ones
3. FrameSet: must be used if you are going to use frames

By declaring a doctype, you force a browser to go into strict mode, and the browser will parse your code the way it was intended. Otherwise, you get quirks mode.

You already know what a DOCTYPE looks like and you have been using them since the beginning. But DOCTYPES can change over time. To keep up, you can always get fresh ones here:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

A fundamental key to employing web standards is being rigorous about separating the layers:

• Document structure: controlled by semantic markup
• Document appearance: controlled by cascading styles
• Interactive behavior: controlled by scripts, databases, and embedded applications

XHTML provides the tool for semantic markup. Its tags should be used only to identify structural and semantic elements of a document. For example, in a purely web standards-compliant page, tables would never be used to control layout. They are intended to be used to display truly tabular information. Similarly, lists should be used only to mark up parts of the document that are truly list-like.

CSS has been developed to specify everything about a document's appearance on whatever device is being used to display it. Style information can be embedded within the XHTML markup, but this practice is discouraged in a standards-compliant site. External style sheets are the preferred solution. External style sheets can also be structured so that they are responsive to the browser and platform a given user is employing.

ECMAScript (aka Javascript), PHP, Ruby, and all manner of applets together with databases residing on servers provide almost all the interactive behaviors associated with contemporary web sites.

Access for All

In 1998, Congress amended the Rehabilitation Act to require federal agencies to make electronic and information technology accessible to people with disabilities. This amendment was called Section 508.

The law applies to all federal agencies when they develop, procure, maintain, or use electronic and information technology.

Briefly, the technical standards cover the following types of technologies:

• software applications and operating systems;
• Web-based information or applications;
• telecommunication products;
• video and multimedia products;
• self contained, closed products (e.g., information kiosks, calculators and fax machines) plus desktop and portable computers.

The criteria for Web-based technology and information are based on access guidelines developed by the Web Accessibility Initiative of the World Wide Web Consortium.

Section 508

There are sixteen requirements of Section 508 that cover the technical requirements of web sites and web-based applications. They are...

1. Alt Lifestyles
   A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
2. InSync
   Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
3. Color Me Badd
   Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
4. Out of Style
   Documents shall be organized so they are readable without requiring an associated style sheet.
5. Server-side Image Maps
   Redundant text links shall be provided for each active region of a server-side image map. [Who uses server-side image maps? Surely, no one in this class does.]
6. Client-side Image Maps
   Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. [Who uses server-side OR client-side image maps? No one in this class does.]
7. Headless Horseman
   Row and column headers shall be identified for data tables.
8. Really Headless Horseman
   Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
9. Frames
   Frames shall be titled with text that facilitates frame identification and navigation. [For a discussion of when and how to use frames, see this Web Style G]
10. Japanese Anime Seizure Rule
    Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
11. 1,000 Words is Worth a Picture
    A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
12. Right Tool for the Job: Scripting
    When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
13. Plug it in, plug it in.
    When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with ß1194.21(a) through (l).
14. Forms
    When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
15. Skip Navigation
    A method shall be provided that permits users to skip repetitive navigation links.
16. Ticketmaster Rule
    When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

Spiraling Costs, Diminishing Returns

Lean, mean code = lower bandwidth requirements, lower costs to design and build, lower maintenance costs.

Ending the Cycle of Obsolescence

"Technologies created by the World Wide Web Consortium ... and other standards bodies and supported by most current browsers and devices make it possible to design sites that will continue to work, even as those standards and browsers evolve" (Zeldman, p. 14).

Designing for Forward Compatibility

Designing for Forward Compatibility = designing for multiple browsers, platforms, and internet devices. It means creating structures for what does not yet exist!

Everyone Wins with Web Standards

The technologies at the heart of web standards -- XHTML and XML for structural markup, CSS for controlling appearance, the DOM coupled with scripting languages like ECMAScript -- "form a roadmap for rational, accessible, sophisticated, and cost-effective web development" (Zeldman, p. 16) and maintenance.