Introduction to Web 2.0

I'm using the term "Web 2.0 design" to describe the prevailing style of web design I introduce in my current style article.

Many people use the term "Web 2.0" to describe:
¤ a resurgence in the web economy
¤ a new level of technological interactivity between web sites and services
¤ or social phenomena deriving from new types of online communities and social networks

Many others also use the term in reference to a recent school of web design

In this tutorial, I describe various common graphic design elements in modern web ("2.0") design style.

Introduction
I'm going to take you through the features of the current wave of excellent web site designs, dissect the most significant features, explain why each one can be good, and show you how to use them in your own sites.

If I had to sum up "Web 2.0" design in one word, it would have to be "simplicity", so that's where we'll start.

I'm a great believer in simplicity. I think it's the way forward for web design.

Today's simple, bold, elegant page designs deliver more with less:
¤ They enable designers to shoot straight for the site's goals, by guiding the site visitor's eye through the use of fewer, well-chosen visual elements.
¤ They use fewer words but say more, and carefully selected imagery to create the desired feel.
¤ They reject the idea that we can't guess what people want from our sites

Simplicity
Web design is simpler than ever, and that's a good thing.

2.0 design means focused, clean and simple.

"Use as few features as are necessary to achieve what you need to achieve"

I really believe in simplicity. That's not to say that all web sites should be minimal, but that we should use as few features as are necessary to achieve what you need to achieve.

I've written elsewhere about Occam's Razor, which is a principle I use all the time. One way of interpreting it is: Given any two possible solutions to a problem, the simpler one is better.

Here are some examples. Note how unnecessary elements have been stripped out from each. There could be a lot more on each page than there is... but would that make them stronger?

The result is that you have to look at the content. You find yourself interacting with exactly the screen features the designer intended. And you don't mind - it's easy, and you get just what you came for.

Why simplicity is good?
¤ Web sites have goals and all web pages have purposes.
¤ Users' attention is a finite resource.
¤ It's the designer's job to help users to find what they want (or to notice what the site wants them to notice)
¤ Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff.
¤ So we need to enable certain communication, and we also need to minimise noise. That means we need to find a solution that's does its stuff with as little as possible. That's economy, or simplicity.

10 Quick Tips to Make Accessible Web Sites

The following ten "Quick Tips" summarize key concepts of accessible Web design. These tips are not complete guidelines; they are only excerpts of concepts from the Web Content Accessibility Guidelines 1.

10 Quick Tips

The links in the Quick Tips below mostly go to the techniques documents that provide implementation guidance - including explanations, strategies, and detailed markup examples.

1. Images & animations: Use the alt attribute to describe the function of each visual.
2. Image maps: Use the client-side map and text for hotspots.
3. Multimedia: Provide captioning and transcripts of audio, and descriptions of video.
4. Hypertext links: Use text that makes sense when read out of context. For example, avoid "click here."
5. Page organization: Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
6. Graphs & charts: Summarize or use the longdesc attribute.
7. Scripts, applets, & plug-ins: Provide alternative content in case active features are inaccessible or unsupported.
8. Frames: Use the noframes element and meaningful titles.
9. Tables: Make line-by-line reading sensible. Summarize.
10. Check your work. Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG

Aural Style Sheets

Aural style sheets use a combination of speech synthesis and sound effects to make the user listen to information, instead of reading information.

Aural presentation can be used:
• by blind people
• to help users learning to read
• to help users who have reading problems
• for home entertainment
• in the car
• by print-impaired communities

The aural presentation converts the document to plain text and feed this to a screen reader (a program that reads all the characters on the screen).

An example of an Aural style sheet:

h1, h2, h3, h4
{
voice-family: male;
richness: 80;
cue-before: url("beep.au")
}

The example above will make the speech synthesizer play a sound, then speak the headers in a very rich male voice.

azimuth: Sets where the sound/voices should come from (horizontally)
cue: A shorthand property for setting the cue-before and cue-after
properties in one declaration
cue-after: Specifies a sound to be played after speaking an element's
content to delimit it from other
cue-before: Specifies a sound to be played before speaking an element's
content to delimit it from other
elevation: Sets where the sound/voices should come from (vertically)
pause: A shorthand property for setting the pause-before and
pause-after properties in one declaration
pause-after: Specifies a pause after speaking an element's content
pause-before: Specifies a pause before speaking an element's content
pitch: Specifies the speaking voice
pitch-range: Specifies the variation in the speaking voice. (Monotone voice
or animated voice?)
play-during: Specifies a sound to be played while speaking an element's
content
richness: Specifies the richness in the speaking voice. (Rich voice or
thin voice?)
speak: Specifies whether content will render aurally
speak-header: Specifies how to handle table headers. Should the headers be
spoken before every cell, or only before a cell with a different header than
the previous cell
speak-numeral: Specifies how to speak numbers
speak-punctuation: Specifies how to speak punctuation characters
speech-rate: Specifies the speed of the speaking
stress: Specifies the "stress" in the speaking voice
voice-family: A prioritized list of voice family names that contain specific
voices
volume: Specifies the volume of the speaking

Print Using CSS

Printing HTML documents has always been problematic. In CSS2 the print properties are added to make it easier to print from the Web.

Property	Description	Values
orphans	Sets the minimum number of lines for a paragraph that must be left at the bottom of a page	number
marks	Sets what sort of marks should be rendered outside the page box	None, crop ,cross
page	Sets a page type to use when displaying an element	Auto ,identifier
page-break-after	Sets the page-breaking behavior after an element	Auto ,always, avoid, left, right
page-break-before	Sets the page-breaking behavior before an element	Auto, always, avoid, left, right
page-break-inside	Sets the page-breaking behavior inside an element	Auto, avoid
size	Sets the orientation and size of a page	Auto, portrait, landscape
widows	Sets the minimum number of lines for a paragraph that must be left at the top of a page	number

Improved Features over CSS1

• Font selection
When choosing which font to use, CSS2 offers both the standard "name matching" system that CSS1 uses, plus three other methods for defining fonts. These are: intelligent font matching, where the user agent uses a font that is the closest match to the requested font. Font synthesis, where the user agent creates a font that matches the metrics of the requested font. And font downloads, where the user agent retrieves a font over the Web.

• Tables
CSS2 recognizes that there might not be a table element (and related elements) in an XML document - but to display tabular data, it is important to have this as a style. So CSS2 allows you to define any element as a table element (and all the related table elements).

• Positioning
While CSS1 had some aspects of positioning; CSS2 takes it to the next level. Relative and absolute positioning determine their location based on their placement within the document or based on the user agent. But along with absolute positioning is the concept of fixed positioning. This acts as a sort of "watermark" in continuous media. In paged media, an element with fixed position is repeated on every page. This allows you to create frame-like documents or place a signature on every page of a document.

• Cursors
Now you can define how you want your cursor to respond to various actions. For example, you might want the default behavior over a link to be changed over some of the links in your document. With CSS2 you can define how the cursor should look over any element.

There are many other features that are new with CSS2.

Differences Between CSS1 and CSS2

There are some really interesting differences between Cascading Style Sheets level 1 and level 2. CSS2 offers many new options for accessibility and use across various user agents. Positioning in CSS2 is more flexible and offers more options to the designer. Automated content allows developers to force the user agent to display specific content elements as well as the layout, look, and feel. Also there is support for special cursors in CSS2 as well as dynamic outlining.

Accessibility and CSS2
Aural style sheets
With CSS2, there are now style properties to define an aural style sheet for your documents. This means, that if a customer comes to your Web page with a screen reader that is CSS2 enabled, you can define how your page will sound. And this isn't just useful for blind customers, with aural CSS your documents can be listened to in automobiles, as auditory documentation for training, entertainment, and even for people who simply can't read.

Paging
CSS1 dealt almost solely with "continuous media" - that is, media like Web pages that would run continuously until the end. Paged media, such as paper, slide shows, or transparencies were not handled. But with CSS2, it is possible to define how pages should be displayed or printed. This means that you can specify the size of the page to be printed, add things like crop marks and register marks, or how the page should layout on double- and single-sided printings.

Media
CSS2 media types allow you to specify different style rules depending upon how your document is going to be displayed. There are many different types you can specify, including: aural, braille, handheld, screen, print, and tv (plus others).

International Accessibility Features
CSS2 now offers features such as more list styles for international documents, support for bidirectional text, and language-sensitive quotation marks.

Introduction to CSS

This article is not meant to teach you Cascading Style Sheets. If you are looking for a CSS tutorial, you should start with the previous link or try the Free CSS Class. In this article you will learn the basics of CSS2 and how it differs from Cascading Style Sheets, level 1.

Cascading Style Sheets, level 2, supports all of the functionality of CSS1. This means that if you create a CSS1 style sheet, it will work in a user agent that understands CSS2. Plus, the way that CSS1 is written, if you write a CSS2 style sheet, and load it in a CSS1-only user agent, that agent will simply ignore the elements and properties that it doesn't recognize.

HTML for Beginners

HTML stands for Hyper Text Mark-up Language. Basically, it consists of pre-defined Tags(Elements). As i see it is very easy language, which can be easily understand by any user either it is new user to html learning platform. It starts with <html> tag and closed with </html> tag. which includes <body> or </body> tags. Apart from there are various tags which we will discuss later.

Here are some sample examples for HTML, which will give you a general idea about what the html is? and how it works?

Example 1:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
Your's Content
</body>
</html>