Difference between revisions of "AIM Class3"

Revision as of 20:19, 23 August 2006

Class Goals

1. Introduce the concept of standardization and validating documents
2. Introduce web accessiblity
3. Reinforce previously learned (DID) image formats and compression

Compliance and Verification of Documents

Review

1. Who creates the standards?

2. Are the standards mandatory for browser developers and for those who post content online?

Compliant XHTML/CSS

1. What do you need in order to make a document "verifiable"?

2. How can you "verify" a document?

Web Accessibility

1. What is web accessibility?

2. Why is web accessibility important?

3. How can you make a site more accessible?

Images on the Web and Compression Schemes

Formats

Main image formats for web publishing at this time: jpg, gif, png, svg (however the most accessible to older browsers are jpg and gif).

JPG

When to use: an image that has a lot of detail (like a photograph).

Algorithm used: JPG

Pros and Cons:

1. Lossy
2. Works well with detailed images

GIF

When to use: an image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)

Algorithm used: LZW

Pros and Cons:

1. Limited to 256 colors
2. Compression works well with broad areas of color, but not with details
3. Patent
4. Animation (flip-book type animation, as a layered stack)

PNG

When to use: When target audience browser support is known, or when transparency is needed

Algorithm used: PNG

Pros and Cons:

1. Lossless
2. Limited support in older browsers
3. Potentially larger file size
4. Transparency

SVG

SVG

Size (visual and file size)

Compression

Copyright

Fair Use, Copyright Issues, Creative Commons

Wrapping Text

Review: block-level vs. inline elements (how does this affect flow?)

"Clearing" flowing content using the clear attribute with the br element (left, right, all)

Images

Deprecated: Using the align attribute (align="right" means the image goes to the right, the text goes to the left)

CSS

Aligning Text with CSS

Wrapping text around a block-level element (such as an image or div) with CSS

Anchor Tags and Pseudo Classes

Psuedo classes: definition and examples

Linking Within a Page

Anchor: an anchor is an element that can serve as both link and destination, depending on the attributes used. (Note: this can be confusing because the word "anchor" often implies a landing place).

To create a destination anchor, use the following syntax: <a name="anchorName"></a>.

Use the anchor names as another way to structure your information. For example, you might have a page that has the following conceptual structure:

    Title

    Introduction

    Content

    References

Each of the above content "sections" can logically serve as destination points. If someone would like to skip to the references, and there is an anchor <a name="references"></a> at the beginning of that section, the code to create the link would be: <a href="#references" alt="references">references</a> - the hash symbol indicates that the link is to a section within the current page.

Links

W3c: http://www.w3.org/

Web Accessibility: http://www.w3.org/WAI/intro/accessibility.php

Overview of Accessibility: http://www.w3.org/WAI/References/QuickTips/Overview.php

Creative Commons: http://creativecommons.org/

Homework

AIM Assignment 3

Reading

ZEN: Chapter 1, pages 34-45; Chapter 4(pages 125-129)

XHTML: Chapter 5, pages 83-98; Chapter 6, 104-115, Chapter 7, pages 117-132