Latest Entries »

Web Interface Definition Language [WIDL]

Filed under: CSS, CSS2, CSS3, Designer, dreamweaver, Graphics, HTML, HTML4, HTML5, Photoshop, web 2.0, XHTML, XHTML, HTML, CSS. CSS1, CSS2, Photoshop, Dreamweaver, Designer — Leave a comment

December 2, 2011

which collectively are referred to as “the submission”. We request the submission be known as the “WIDL” submission.

Abstract

This document provides the specification for the Web Interface Definition Language (WIDL), a metalanguage that implements a service-based architecture over the document-based resources of the World Wide Web. WIDL is an application of the eXtensible Markup Language (XML); it allows interactions with Web servers to be defined as functional interfaces that can be accessed by remote systems over standard Web protocols, and provides the structure necessary for generating client code in languages such as Java, C/C++, COBOL, and Visual Basic. WIDL enables a practical and cost-effective means for diverse systems to be rapidly integrated across corporate intranets, extranets, and the Internet.

1. Introduction

The World Wide Web is providing millions of end-users access to ever-increasing volumes of information. While the Web initially served browsers static documents, the resources of legacy systems, relational databases and multi-tier applications have all been made available to the Web browser to provide corporate users with interactive information resources including financial services, inventory management, on-line purchasing and package tracking.

While the Web has achieved the extraordinary feat of providing ubiquitous accessibility to end-users, it has in many cases reinforced manual inefficiencies in business processes as repetitive tasks are required to transcribe or copy and paste data from browser windows into desktop and corporate applications. This is as true of Web data provided by remote business units and external (i.e. partner or supplier) organizations as it is of Web data accessible from both public and subscription based Web sites. The problem of direct access to Web data from within business applications has been largely ignored.

The purpose of the Web Interface Definition Language (WIDL) is to enable automation of all interactions with HTML/XML documents and forms, providing a general method of representing request/response interactions over standard Web protocols, and allowing the Web to be utilized as a universal integration platform.

A central feature of WIDL is that programmatic interfaces can be defined and managed for data (HTML, XML or text files) and services (CGI-bin, database, or other back end systems) that are not under the direct control of programs that require such access. WIDL definitions can be co-located with client programs, centrally managed in a client/server architecture, or referenced directly from HTML/XML documents.

WIDL defintions provide a mapping between Web resources and applications written in conventional programming languages such as C/C++, COBOL, Visual Basic, Java, JavaScript, etc., enabling automatic and structured Web access by compatible client programs, including mainstream business applications, desktop applications, applets, Web agents, and server-side Web programs (CGI, etc.).

Automatic means that complex interactions with Web servers do not require human intervention; programs can request Web data and services by making local calls to functions which encapsulate standard Web access protocols and utilize WIDL definitions to provide naming services, change management, error handling, condition processing and intelligent data binding.

Structured means that Web data and services are described as interfaces with well defined input and output variables.

Standard Web access protocols means HTTP and HTTPS.

Compatible means any program that both utilizes WIDL definitions to define the location of Web services and the structure of data that is returned by standard HTTP and HTTPS requests, and allows WIDL definitions to be managed locally, centrally, or by individual service providers.

WIDL describes business objects on the Web, providing the basis for a common API across Web servers, legacy systems, databases, and middleware infrastructures, and effectively transforming the Web from an access medium into an integration platform.

This document provides a complete description of the Web Interface Definition Language (WIDL).

2. Benefits of WIDL

A major part of the value of an Interface Defintion Language (IDL) is that it can define services offered by applications in an abstract but highly usable fashion. WIDL brings to the Web many of the features of IDL concepts that have been implemented in distributed computing and transaction processing platforms including DCE, and CORBA.

2.1 Business-to-Business Integration

WIDL makes it easy for organizations to automate business transactions with customers and suppliers. WIDL describes and automates interactions with services hosted by Web servers on intranets, extranets and the Internet; it transforms the Web into a standard integration platform and provides a universal API for all Web-enabled systems.

Using HTML, XML, HTTP and HTTPS as corporate standards glue, WIDL requires only that target systems be Web-enabled. There are hundreds of products in the market today which Web-enable existing systems, from mainframes to client/server applications. The use of standard Web technologies empowers various IT departments to make independent technology selections. This has the effect of lowering both the technical and ‘political’ barriers that have typically derailed cross-organizational integration projects.

A number of analysts have already warned that proprietary e-commerce platforms could lock suppliers into relationships by forcing them to integrate their systems with one infrastructure for business-to-business integration, making it costly for them to switch to or integrate with other partners who have selected alternate e-commerce platforms. Buyer-supplier integration issues involve many-to-many relationships, and demand a standard platform for functional integration and data exchange.

A service defined by WIDL is equivalent to a function call in standard programming languages. At the highest level, WIDL files describe the locations (URLs) of services, input parameters to be submitted (via Get or Post methods) to each service, conditions for successful processing, and output parameters to be returned by each service.

WIDL provides the following features:

A browser is not required to drive Web applications

WIDL definitions are dynamically interpreted and can be centrally managed

Client applications are insulated from changes in service locations and data extraction methods

Developers are insulated from network programming concerns

Application resources can be integrated through firewalls and proxies

WIDL can be used to describe interfaces and services for:

Static documents (HTML, XML, and plain text files)

Dynamically generated documents (HTML, XML, and plain text files)

HTML forms

URL directory structures

WIDL can be used:

to automate interactions with Web servers

for both on-demand and scheduled extraction of targeted Web data

to aggregate data from a number of Web sources

to chain services across multiple Web sites

to rapidly integrate Web resources with traditional application development languages and environments

WIDL has the ability to specify conditions for successful processing, and error messages to be returned to calling programs. Conditions further enable services to be defined that span multiple documents.

2.2 Change Management

One of WIDL’s most significant benefits is its ability to insulate client programs from changes in the format and location of Web documents. Unlike the way CORBA and DCE IDL are normally used, WIDL is interpreted at runtime; as a result, service URLs, object references in variables, definitions of document regions, success/failure conditions, and directives for service chaining can all be administered without requiring modification of client code. This usage model supports application-to-application linkages that are far more robust and maintainable than if they were coded by hand.

There are three models for WIDL management:

client side – where WIDL files are co-located with a client program

naming service – where WIDL definitions are centrally managed and referenced via directory services, i.e. LDAP

server side – where WIDL files are referenced by, co-located with, or embedded within Web documents.

WIDL does not require that existing Web resources be modified in any way. Flexible management models allow organizations to describe and integrate Web sites that are uncontrolled, as well as to provide their business partners with interfaces to services that are controlled. The ability to seamlessly migrate from independent to shared management eases the transition from informal to formal business-to-business integration.

2.3 Language Bindings

The primary purpose of WIDL is integration of Web resources with corporate business applications. In much the same way that DCE or CORBA IDL is used to generate code fragments, or ‘stubs’, to be included in application development projects, WIDL provides the structure necessary for generating client code in languages such as C/C++, Java, COBOL, and Visual Basic. Developers can thus be insulated from the need to understand both HTML/XML parsing and Web protocols. This capability enables the existing skills of innumerable programmers to be rapidly leveraged in the utilization of Web based resources.

3. Object Model References

Many of the features of WIDL require a capability to reliably identify and extract specific data elements from Web documents. Various mechanisms for accessing elements of HTML and/or XML documents have been defined, such as the Javascript Page Object Model, the Document Object Model, and XLL XPointers. WIDL does not define or determine a mechanism for accessing document data, but rather allows an object model referencing mechanism to be specified on a per-interface basis.

The following capabilities are desirable for accessing elements of Web documents:

HTML Parsing

XML Parsing

Text Pattern Matching

Object referencing mechanisms would ideally support both parsing and pattern matching. Pattern matching extracts data based on regular expressions, and is well suited to raw text files and poorly constructed HTML documents. Parsing, on the other hand, recovers document structure and exposes relationships between document objects, enabling elements of a document to be accessed with an object model.

4. WIDL Reference

The Web Interface Definition Language (WIDL) is an application of the eXtensible Markup Language (XML); its definition consists of the various XML elements defined in this section.

Major Elements

WIDL – defines an interface

SERVICE – child of WIDL – defines a service

BINDING – child of WIDL – defines input and output parameters for services

Minor Elements

VARIABLE – child of BINDING – defines a variable within a binding

CONDITION – child of BINDING – defines a condition within a binding

REGION – child of BINDING – defines a area within a document

Tags: Amit, amit-designer, amit-roy, amitroy, CSS, CSS2, CSS3, CSS3 Advanced Layout Module, CSS3 Box Model, CSS3 Cascading and Inheritance, CSS3 Mobile Profile, Roy-Amit, roy-designer, royamit, SEO, web 2.0, web-designer-Amit, web-site-designer, XHTML

Comment

HTML4 vs HTML 5

Filed under: CSS, CSS2, CSS3, Designer, dreamweaver, Graphics, HTML, HTML4, HTML5, Photoshop, web 2.0, XHTML, XHTML, HTML, CSS. CSS1, CSS2, Photoshop, Dreamweaver, Designer — Leave a comment

November 22, 2011

What are the key differences between HTML4 and HTML5 draft?

HTML5 has several goals which differentiate it from HTML4.

The primary one is consistent, defined error handling. As you know, HTML purposely supports ‘tag soup’, or the ability to write malformed code and have it corrected into a valid document. The problem is that the rules for doing this aren’t written down anywhere. When a new browser vendor wants to enter the market, they just have to test malformed documents in various browsers (especially IE) and reverse-engineer their error handling. If they don’t, then many pages won’t display correctly (estimates place roughly 90% of pages on the net as being at least somewhat malformed).

So, HTML5 is attempting to discover and codify this error handling, so that browser developers can all standardize and greatly reduce the time and money required to display things consistently. As well, long in the future after HTML has died as a document format, historians may still want to read our documents, and having a completely defined parsing algorithm will greatly aid this.

The secondary goal of HTML5 is to develop the ability of the browser to be an application platform, via HTML, CSS, and Javascript. Many elements have been added directly to the language that are currently (in HTML4) Flash or JS-based hacks, such as <canvas>, <video>, and <audio>. Useful things such as Local Storage (a js-accessible browser-builtin sql database, for storing information beyond what cookies can hold), new input types such as date for which the browser can expose easy user interface (so that we don’t have to use our js-based calendar date-pickers), and browser-supported form validation will make developing web applications much simpler for the developers, and make them much faster for the users (since many things will be supported natively, rather than hacked in via javascript).

There are many other smaller efforts taking place in HTML5, such as better-defined semantic roles for existing elements (<strong> and <em> now actually mean something different, and even <b> and <i> have vague semantics that should work well when parsing legacy documents) and adding new elements with useful semantics – <article>, <section>, <header>, <aside>, and <nav> should replace the majority of <div>s used on a web page, making your pages a bit more semantic, but more importantly, easier to read. No more painful scanning to see just what that random </div> is closing – instead you’ll have an obvious </header>, or </article>, making the structure of your document much more intuitive.

SEO Differences Between HTML5 v HTML4 Versions

A Typical Web Page In HTML 4 Code:

<title>Hobo Web LTD Scotland</title>

</head>

<body>

</div>

Test Page 1</a></h2> <div>

<p>Article Text here</p>

</div>

Test 2</a></h2>

<div>

<p>Article 2 Text here</p>

</div>

<div>

<a href=”/blog/page/2/”>Ã‚« Previous Entries</a>

</div>

</div>

<li><h2>Hobo Stuff</h2>

<ul>

<li><a href=”/blog/comment-policy/”>Comment Policy</a></li>

</ul></li>

<li><h2>Archives</h2>

<ul>

<li><a href=’/blog/2008/04/’>April 2008</a></li>

<li><a href=’/blog/2008/03/’>March 2008</a></li>

<li><a href=’/blog/2008/02/’>February 2008</a></li>

<li><a href=’/blog/2008/01/’>January 2008</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

…here’s the same page, with differences clear, in the W3C’s new incarnation.

An Example of a Typical Page in HTML 5 Code:

<title>Hobo Web LTD Scotland</title>

</head>

<body>

</header>

Test Page 1</a></h2> <p>Article Text here</p>

</article>

Test 2</a></h2>

<p>Article Text 2 here</p>

</article>

<nav>

<a href=”/blog/page/2/”>Ã‚« Previous Entries</a>

</nav>

</section>

<nav>

<ul>

<li><h2>Hobo Stuff</h2>

<ul>

<li><a href=”/blog/comment-policy/”>Comment Policy</a></li>

</ul></li>

<li><h2>Archives</h2>

<ul>

<li><a href=’/blog/2008/04/’>April 2008</a></li>

<li><a href=’/blog/2008/03/’>March 2008</a></li>

<li><a href=’/blog/2008/02/’>February 2008</a></li>

<li><a href=’/blog/2008/01/’>January 2008</a></li>

</ul>

</li>

</ul>

</nav>

</footer>

</body>

</html>

HTML 5 Notes

Discover other new features, and learn more about the future of HTML.

HTML 5 introduces new elements to HTML for the first time since the 1990′s. New structural elements include aside, figure, and section. New inline elements include time, meter, and progress. New embedding elements include video and audio. New interactive elements include details, datagrid, and command.

HTML 5 defines the fifth major revision of the core language of the World Wide Web – HTML – from the W3C (World Wide Web Consortium). Also called Web Applications 1.0 – there are still no no namespaces or schemas. Elements don’t have to be closed. Browsers are forgiving of errors. A p is still a p, and a table is still a table.

HTML 5 adds new elements to specifically identify each of these common constructs:

section: A part or chapter in a book, a section in a chapter, or essentially anything that has its own heading in HTML 4

header: The page header shown on the page; not the same as the head element

footer: The page footer where the fine print goes; the signature in an e-mail message

nav: A collection of links to other pages

article: An independent entry in a blog, magazine, compendium, and so forth.

Comment

SEO-Advanced Text Linking Strategies

Filed under: CSS, CSS2, CSS3, Designer, dreamweaver, HTML, web 2.0, XHTML, XHTML, HTML, CSS. CSS1, CSS2, Photoshop, Dreamweaver, Designer — Leave a comment

April 18, 2009

There are some advanced things you can do when considering your link text that will allow you to gain even more benefit from them. Lets look at some ideas and suggestions, as well as think about some more high levels strategies revolving about link text.

Place Plain Text Around Links

Placing some plain text next to your links is better than just having bare links all over the place. Many search engines use the text surrounding a link to help figure out what a link is about. Although I would not go so far as to place plain text in your navigation menu, and it may not look good down near the bottom of your page near the copyright notice, but when available, its always a good idea to add a line of descriptive text next to your link.

Varying Your Destination URL?

There has been alot of debate in the last few years about whether when you are out there submitting your links, asking for links, and linking your own pages up, whether you should change out the desination URL. What I mean is, ‘domain.com’ and ‘www.domain.com’ usually point to the exact same place. Also depending on my website’s setup, something like ‘domain.com/index.php’ or ‘domain.com/index.htm’ also points to the same place.

So should you be changing up the destination URL constantly? No. Should you change it up a bit here and there? Yes. You should find the scheme that you prefer most, and stick with that 80-90% of the time. So if you decide that you like the ‘domain.com’ version better than the ‘www.domain.com’ version, then stick with that most of the time. Sticking with the same scheme will give you better search engine results in general, however you should vary it using the different flavors of your URL at least 10% or so of the time.

How Many Links Per Page?

This is certainly a good question, and something that really deserves its own page. However with the present state of the web, I would personally not put more than 30 links on one page at any given time. Now there may be some exceptions to this. For instance your own sitemap page, or a page that has 50 links that all point to other areas of your site. Thats not a big deal in the eyes of the search engines. What I would avoid however, is placing large amounts of links to external sites on one big page. You don’t want to have your page be viewed as some sort of link farm right?

What If My Link Has To Be My Name?

Blog comments are a common place where there are links that are expected to be a name. Many blog systems allow you attach a link to the name you use to post comments. This free link of sorts tends to be highly abused however, and the blog owners do not look too kindly upon people who jam a bunch of keywords in as their ‘name’ when posting comments. This smells like spam and they will delete and/or blacklist you in a second. However, you can often give yourself a ‘title’ type of name. As long as you are backing it up with a long,useful,relevant comment that blows away all the other comments on the page, most blog owners would be happy to put up a comment like that. Examples of good names to use would be ‘Sewing Sally’ instead of just ‘Sally’. Yes you are still calling yourself Sally, but at least you have the keyword ‘sewing’ now added to the link as well. Other examples that you can try would be things like ‘Cooking Fan’, ‘Joe the Plumber’, or ‘Marketing Guru’.

Comment

Building Accessible Static Navigation with CSS

Filed under: CSS, CSS2, CSS3, Designer, dreamweaver, Graphics, HTML, Photoshop, web 2.0, XHTML, XHTML, HTML, CSS. CSS1, CSS2, Photoshop, Dreamweaver, Designer — Leave a comment

February 23, 2009

When building a navigation menu for a web site, steps should be taken to ensure that it is accessible, and degrades gracefully in older browsers with lesser CSS support. In this article we will explore one such implementation. The navigation menu you see in this example is built with valid, semantic HTML and CSS – no JavaScript is involved, as I felt this was unnecessary. The static (non-expanding/collapsing) nature of the example suits a web site comprised of twenty or less target pages.

· Skip to content styled button – This is placed directly at the top of the nav container, and is an accessibility feature for users with visual impairments.

<!– /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:621349764; mso-list-type:hybrid; mso-list-template-ids:-1506797044 1590970310 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;} @list l0:level1 {mso-level-number-format:bullet; mso-level-text:; mso-level-tab-stop:.3in; mso-level-number-position:left; margin-left:.4in; text-indent:-.1in; font-family:Symbol;} ol {margin-bottom:0in;} ul {margin-bottom:0in;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
· Area headings – This defines the structure and presentation of the area headings that separate each section of the navigation container.

<!– /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:621349764; mso-list-type:hybrid; mso-list-template-ids:-1506797044 1590970310 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;} @list l0:level1 {mso-level-number-format:bullet; mso-level-text:; mso-level-tab-stop:.3in; mso-level-number-position:left; margin-left:.4in; text-indent:-.1in; font-family:Symbol;} ol {margin-bottom:0in;} ul {margin-bottom:0in;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
· Link state symbols area – This is a legend consisting of symbols that define the state of a hyperlink as a user traverses the document collection. It is an accessibility feature for users that are visually impaired, color blind, or suffer from short term memory loss or dyslexia.

<!– /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:621349764; mso-list-type:hybrid; mso-list-template-ids:-1506797044 1590970310 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;} @list l0:level1 {mso-level-number-format:bullet; mso-level-text:; mso-level-tab-stop:.3in; mso-level-number-position:left; margin-left:.4in; text-indent:-.1in; font-family:Symbol;} ol {margin-bottom:0in;} ul {margin-bottom:0in;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
· Topics area – As it says, here is where all topic web pages are listed and hyperlinked for surfing through the document collection.

________________________________________________________________________________________________

1.1 <!– /* Font Definitions */ @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
Nav container markup

<a href=”#a1″>skip to content</a></h4>

<hr />

<h4>link state symbols</h4>

<li><img alt=”Ball symbol.” class=”state” src=”images/hover.gif” width=”16″ height=”16″ /><span class=”focus”>Focus/Hover</span></li>

<li class=”unvisited”><img alt=”Chain link symbol.” class=”state” src=”images/link.gif” width=”16″ height=”16″ />Unvisited</li>

<li class=”visited”><img alt=”Check mark symbol.” class=”state” src=”images/visited.gif” width=”16″ height=”16″ />Visited</li>

<li class=”currently”><img alt=”Star symbol.” class=”state” src=”images/star.gif” width=”16″ height=”16″ />Currently Open</li>

</ul>

<hr />

<h4>topics</h4>

<ul class=”linkstate”

<ul>

<li><a href=”Topic1.htm”>Topic 1</a></li>

<li class=”topic2″><a href=”Topic2.htm” title=”This page is currently open.”>Topic 2</a></span>

<ul>

<li><a href=”Topic2a.htm”>Topic 2a</a></li>

<li><a href=”Topic2b.htm”>Topic 2b</a></li>

<li><a href=”Topic2c.htm”>Topic 2c</a></li>

<li><a href=”Topic2d.htm”>Topic 2d</a></li>

<li><a href=”Topic2e.htm”>Topic 2e</a></li>

<li><a href=”Topic2f.htm”>Topic 2f</a></li>

</ul>

</li>

<li><a href=”Topic3.htm”>Topic 3</a></li>

<li><a href=”Topic4.htm”>Topic 4</a></li>

<li><a href=”Topic5.htm”>Topic 5</a></li>

</ul>

</li>

</ul>

</div>

#nav {

width: 23em; – gives the navigation div container a relative horizontal size

position: absolute; – removes the navigation div container from the natural flow of the document.

top: 1em; – sets the distance from the top of the browser window

left: 1em; – sets the distance from the left side of the browser window

margin: 0em; – shorthand for the margin property – removes all margins in the order of top, right, bottom and left

padding: 0em 0.5em 1em 0.5em; – shorthand for the padding property – sets the padding in the order of top, right, bottom and left:

border: 1px solid #ffd505; } – shorthand code for the border property – defines the width, type, and color of the border surrounding the nav container:

#nav ul {

margin: 0em; – shorthand for the margin property – removes all margins in the order of top, right, bottom and left

padding: 0em; – shorthand for the padding property – removes all padding in the order of top, right, bottom and left

list-style-type: none; – removes the list-styles: discs, squares, circles, etc.

color: #fff; – sets the color of white to the text characters

background: inherit } – sets the list to inherit the container background color

&#035nav ul li {

margin: 0em; – shorthand for the margin property – removes all margins in the order of top, right, bottom and left

padding: 0.4em 0em 0em 0.5em; – shorthand for the padding property – sets padding in the order of top, right, bottom, and left:

list-style-type: none; } – removes the list-styles: discs, squares, circles, etc.

&#035nav ul ul li {

padding: 0em; – shorthand for the padding property – removes all padding in the order of top, right, bottom and left

margin-left: 2em; – sets the left margin padding to 2em

list-style-type: none; } – removes the list-styles: discs, squares, circles, etc.

&#035nav ul ul ul li {

padding: 0em; – shorthand for the padding property – removes all padding in the order of top, right, bottom and left

margin-left: 1.4em; – sets the left margin padding to 1.4em

list-style-type: none; } – removes the list-styles: discs, squares, circles, etc.

<!– /* Font Definitions */ @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
Following accessibility guidelines, I have included a “skip to content” link (styled button) on each web page to allow users to bypass the navigation section and skip to the beginning of the page content. I have designed the button using CSS to be visible to all users by default, making them aware that this accessibility tool is available. It is made fairly small, and in line with the design of the web page so as not to be too obtrusive to the page design. If a client specified it should not be visible, it could be moved off the visible page using CSS absolute positioning (Important Note: visibility: hidden; should not be used as this makes it invisible to assistive technologies.) This way, it wouldn’t be seen at all by sighted users, and users employing screenreaders (or other assistive technologies) could activate it through the keyboard. This eliminates the repetitive spatial navigation or tab key actions needed to manually bypass the navigation and arrive at the first section of content.

As shown in the following code sample, the markup of the styled button (h4 class=”skip”) links the anchor element and its href attribute value (a href=”#a1″) with the id attribute value of the first content heading (h2 id=”a1″). I do not employ any access keys/character keys to achieve this because the majority have already been pre-assigned by the operating system, the user agent/browser, and any assistive device which may be installed, notwithstanding those few available which a user may have assigned themselves.

Example: <h4 class=”skip”>

<a href=”#a1″>skip to content</a>

</h4>

#nav h4.skip {

font-size: 1.1em; – sets the font-size to a relative size of 1.1em

font-weight: bold; – sets the font-weight to bold

font-variant: small-caps; – sets the font-variant to small-caps

margin: 1.8em 0em 0em 0em; – shorthand for the margin property in the order of top, right, bottom and left

padding: 0.5em; – sets all padding (top, right, bottom, and left) to 0.5em

color: #fff; – sets the font color to white

background: none; – removes any background and image attached to the anchor hyperlink

text-decoration: none; } – removes the default underline from the anchor hyperlink

#nav h4.skip a:link #nav h4.skip a:visited{

color: #000; – sets the font color to black

background: #ccc; – sets the background color of the button

padding: 0.2em 1em; – shorthand code for padding in the order of top and bottom, then right and left

border-top: 0.15em solid #fff; – top border shorthand: sets the thickness, type and color for the unvisited and visited state of the top border of the button

border-left: 0.15em solid #fff; – left border shorthand: sets the thickness, type and color for the unvisited and visited state of the left border of the button

border-bottom: 0.15em solid #aaa; – bottom border shorthand: sets the thickness, type and color for the unvisited and visited state of the bottom border of the button

border-right: 0.15em solid #aaa; } – right border shorthand: sets the thickness, type and color for the unvisited and visited state of the right border of the button

#nav h4.skip a:hover #nav h4.skip a:active #nav h4.skip a:focus{

color: #fff; – sets the font color to white

background: #454545; – sets the background color of the button

padding: 0.2em 1em; – shorthand code for padding in the order of top and bottom, then right and left

border-top: 0.15em solid #fff; – top border shorthand: sets the thickness, type and color for the hover, active and focus states of the top border of the button

border-left: 0.15em solid #fff; – left border shorthand: sets the thickness, type and color for the hover, active and focus states of the left border of the button

border-bottom: 0.15em solid #aaa; – bottom border shorthand: sets the thickness, type and color for the hover, active and focus states of the bottom border of the button

border-right: 0.15em solid #aaa; } – right border shorthand: sets the thickness, type and color for the hover, active and focus states of the right border of the button

The Area headings CSS

#nav h4 {

font-size: 1.5em;

font-variant: small-caps;

text-align: center;

margin: 0em;

padding-bottom: 0.3em;

color: #fff;

background: inherit; }

This legend defines the current state of all hyperlinks. In the Topics area of the navigation container, the current state of each link is represented by a different symbol positioned to the right of the hyperlink text – these are summarized in the table below. This is important to users that are color blind, visually impaired, or suffer from short term memory deficiency. It eliminates link state color, gives them the ability to identify if they have or have not visited a topic, and also allows them to identify a hyperlink by keyboard or mouse navigation.

State Description

Focus/Hover Ball – signifies the focus, hover and active pseudo-classes

Unvisited Chain link – signifies an unvisited link, the link pseudo-class

Visited Check mark – signifies a visited link, the visited pseudo-class

Currently Open Star – signifies a topic web page which is currently open and being viewed

<!– /* Font Definitions */ @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
The legend is constructed using a simple unordered list, containing image elements with relative paths to the symbol graphics. alt attributes give a short description of the symbols. Please note that this legend gives a static rendering of the symbols – purely for identification purposes. The symbols will become dynamic through CSS image replacement in the Topics area hyperlinks, when the linkstate class attribute is added to the opening tag of the root unordered list element.

<h4>link state symbols</h4>

<li class=”focus”><img alt=”Ball symbol.” class=”state” src=”images/hover.gif” width=”16″ height=”16″ />Focus/Hover</li>

<li class=”unvisited”><img alt=”Chain link symbol.” class=”state” src=”images/link.gif” width=”16″ height=”16″ />Unvisited</li>

<li class=”visited”><img alt=”Check mark symbol.” class=”state” src=”images/visited.gif” width=”16″ height=”16″ />Visited</li>

<li class=”currently”><img alt=”Star symbol.” class=”state” src=”images/star.gif” width=”16″ height=”16″ />Currently Open</li>

</ul>

#nav .linkstate {

font-weight: bold; } – sets all characters to bold

#nav .state {

padding-right: 1em; – sets the symbol image space to the right of the text

vertical-align: top; } – sets the symbol image to the top of the text baseline

#nav .focus {

color: #fff; – sets the text color to white

background: transparent; – sets the background color to transparent

text-decoration: underline; } – sets the underline beneath the hyperlink

#nav .link {

color: #a4d3ee; – sets the text color to light blue

background: transparent; } – sets the background color to transparent

#nav .visited {

color: orange; – sets the text color to orange

background: transparent; }

#nav .currently {

color: yellow; – sets the text color to yellow

background: transparent; } – sets the background color to transparent

<!– /* Font Definitions */ @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
In this code I have dynamically employed the symbols I identified earlier in the Link state symbols area legend. Identification of the current state of any link in the Topics area is achieved by inserting a class attribute with its value of linkstate in the root unordered list element opening tag (<ul class=”linkstate”>). The link state symbols, as previously defined in the legend, now become dynamic though image replacement using external CSS. All hyperlinks in the Topics area now show their current link state via the symbol at the end of their link text. Links that are not in the hover, active or focus state will show the unvisited chain link symbol, the visited check mark symbol, or the star symbol which signifies that the page is currently open and being viewed.

<!– /* Font Definitions */ @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:1627421319 -2147483648 8 0 66047 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
In addition, as a user navigates through the Topics area hyperlink list via keyboard or mouse and gains focus on each link, the link will become underlined, and a ball symbol will replace either the chain link (unvisited) or check mark (visited) symbols. This ball symbol represents the hover, active, and focus pseudo-classes of the anchor link element. Please note that the star symbol which signifies a currently open page, will remain static and not change (this is an optional feature which I’ll describe later in the article).

<h4>topics</h4>

<ul>

<li><a href=”topic1.htm”>Topic 1</a></li>

<li><a href=”topic2.htm”>Topic 2</a>

<ul>

<li><a href=”subtopic2a.htm”>Subtopic 2A</a></li>

<li><a href=”subtopic2b.htm”>Subtopic 2B</a></li>

<li><a href=”subtopic2c.htm”>Subtopic 2C</a></li>

<li class=”subtopic2d”><a href=”subtopic2d.htm” title=”This page is currently open.”>Subtopic 2D</a></li>

<li><a href=”subtopic2e.htm”>Subtopic 2E</a></li>

<li><a href=”subtopic2f.htm”>Subtopic 2F</a></li>

</ul>

</li>

<li><a href=”topic3.htm”>Topic 3</a></li>

<li><a href=”topic4.htm”>Topic 4</a></li>

<li><a href=”topic5.htm”>Topic 5</a></li>

</ul>

</li>

</ul>

#nav .linkstate {

font-weight: bold; } – sets all link characters to bold.

#nav .linkstate a:link{

text-decoration: none; – removes underlining from hyperlinks

color: #a4d3ee; – sets the font color to a light blue

padding-right: 1.7em; – creates space on the right side of the Topic for the linkstate image

vertical-align: bottom; – positions the image at the bottom of the text line

background: #000 url(images/link.gif) no-repeat right; } – shorthand for the background property, defined as follows:

#000 – sets the background color to black

url(images/link.gif) – sets the relative path to the images folder containing the link icon image

no-repeat – sets the image to a single and not a multiple rendering

right; – positions the image to the right of the hyperlink

#nav .linkstate a:visited{

text-decoration: none; – removes underlining from hyperlinks

color: orange; – sets the font color to orange

padding-right: 1.7em; – makes space on the right side of the Topic for the linkstate image

vertical-align: bottom; – positions the image at the bottom of the text line

background: #000 url(images/visited.gif) no-repeat right; } – shorthand for the background property, defined as follows:

#000 – sets the background color to black

url(images/visited.gif) – sets the relative path to the images folder containing the link icon image

no-repeat – sets the image to a single and not a multiple rendering

right; – positions the image to the right of the hyperlink

#nav .linkstate a:hover{

text-decoration: none; – removes underlining from hyperlinks

color: #fff; – sets the font color to white

padding-right: 1.7em; – makes space on the right side of the Topic for the linkstate image

vertical-align: bottom; – positions the image at the bottom of the text line

background: #000 url(images/hover.gif) no-repeat right; } – shorthand for the background property, defined as follows:

#000 – sets the background color to black

url(images/hover.gif) – sets the relative path to the images folder containing the link icon image

no-repeat – sets the image to a single and not a multiple rendering

right; – positions the image to the right of the hyperlink

#nav .linkstate a:active{

text-decoration: none; – removes underlining from hyperlinks

color: #fff; – sets the font color to white

padding-right: 1.7em; – makes space on the right side of the Topic for the linkstate image

vertical-align: bottom; – positions the image at the bottom of the text line

background: #000 url(images/hover.gif) no-repeat right; } – shorthand for the background property, defined as follows:

#000 – sets the background color to black

url(images/hover.gif) – sets the relative path to the images folder containing the link icon image

no-repeat – sets the image to a single and not a multiple rendering

right; – positions the image to the right of the hyperlink

#nav .linkstate a:focus{

text-decoration: none; – removes underlining from hyperlinks

color: #fff; – sets the font color to white

padding-right: 1.7em; – makes space on the right side of the Topic for the linkstate image

vertical-align: bottom; – positions the image at the bottom of the text line

background: #000 url(images/hover.gif) no-repeat right; } – shorthand for the background property, defined as follows:

#000 – sets the background color to black

url(images/hover.gif) – sets the relative path to the images folder containing the link icon image

no-repeat – sets the image to a single and not a multiple rendering

right; – positions the image to the right of the hyperlink

Tags: Amit, amit-designer, amit-roy, amitroy, CSS, CSS2, CSS3, CSS3 Box Model, Roy-Amit, roy-designer, royamit, web 2.0, web-designer-Amit, web-designer-roy, web-site-designer, XHTML

Comment

W3C CSS3 Recommendations

Filed under: CSS, CSS2, CSS3, Designer, dreamweaver, Graphics, HTML, Photoshop, web 2.0, XHTML, XHTML, HTML, CSS. CSS1, CSS2, Photoshop, Dreamweaver, Designer — Leave a comment

December 16, 2008

CSS3 working drafts and candidate recommendations are in progress. You can check out what we can look forward to with the upcoming version of CSS. Some newer browsers even support a few of the features. The W3C also welcomes and invites feedback before these modules become final Recommendations.

As you will also see below, CSS is becoming modularized. There are several reasons: 1) One module can easily be updated, speeding up the turnaround time and allowing greater flexibility; 2) User agents can also choose to support specific modules, such as an aural browser with constraints and only needing aural CSS specifications; and, 3) to help clarify relationships between various parts of the specifications and to reduce the overall size of the document.

Introduction to CSS3 (Working Draft)
Still a Working Draft, check out W3C’s Introduction to CSS3. Take a look at what’s being worked on for the next version of CSS.
CSS3 Module: Backgrounds (Working Draft)
This new module describes the functionality of backgrounds, such as background colors and background images, extending the functionality of CSS2.
CSS3 Advanced Layout Module
Template-based positioning, tabbed (stacked) displays, row and column layouts, more.
CSS3 Module: Box Model (Working Draft)
This new module builds on CSS3′s inline text module. Although a typically horizontal flow, CSS3 adds a vertical flow that would be used for ideographic scripts or Uighur script.
CSS3 Module: Cascading and Inheritance (Working Draft)
This new module specifies how values are assigned to properties.
CSS3 Module: Color (Candidate Recommendation)
This working draft describes the color properties and values that are proposed for CSS level 3, with several new properties and values added.
CSS3 Module: Fonts (Working Draft)
This new module for CSS3 allows font specification by a user agent and new font decoration properties.
CSS3 Module: Line (Working Draft)
This new module for CSS3 specifies the presentation aspects of line within block elements and inline elements, baseline alignment, drop initials, and related.
CSS3 Module: Lists (Working Draft)
This new module for CSS3 proposes changes to the functionality of CSS2 list specifications.
CSS3 Module: Mobile Profile (Candidate Recommendation)
This new module for CSS3 defines a subset of CSS2 for the needs and constraints of mobile devices.
CSS3 Module: Multi-column Layout (Working Draft)
This new module for CSS3 builds on the CSS3 Box Model module and adds multi-column functionality to the content of an element.
CSS3 Paged Media Module
This module “describes the page model that partitions a flow into pages. It builds on the CSS3 Box model module and introduces and defines the page model and paged media. It adds functionality for pagination, page margins, headers and footers, image orientation. Finally it extends generated content for the purpose of cross-references with page numbers.”
CSS3 Module: Ruby (Candidate Recommendation)
This new module for CSS3 proposes a set of CSS properties associated with the ‘Ruby‘ elements.
CSS3 Module: Selectors (Candidate Recommendation)
This new module for CSS3 proposes new selectors and includes and extends the selectors from CSS1 and CSS2.
CSS3 Module: Text (Candidate Recommendation)
This new module for CSS3 specifies text layout such as international writing directions, text alignment, indenting, wrapping, white-space, text overflow, text decoration, and related. Several new CSS properties are added for CSS3.
CSS TV Profile 1.0 Candidate Recommendation
A subset of CSS2 and CSS3 Color module, providing specifications for TV devices.
CSS3 Module: Values and Units (Working Draft)
This new module describes CSS property values and units and how the specified values are processed into computed values and actual values.

Comment

New Cascading Style Sheets Recommendation from W3C

Filed under: CSS, CSS2, CSS3, HTML, XHTML, XHTML, HTML, CSS. CSS1, CSS2, Photoshop, Dreamweaver, Designer — Leave a comment

December 16, 2008

The World Wide Web Consortium (W3C) today issued a Recommendation for Web style sheets. The Recommendation – Cascading Style Sheets, level 1 (CSS1) – gives Web designers a robust set of tools to help them specify Web page presentation properties such as fonts, colors and margins. Through links, CSS1 allows a single style sheet to apply to all Web pages on a site and thereby dramatically simplifying Web site maintenance. Also, a style sheet can be put inside a Web document and in detail specify how the document is presented. W3C Members have reviewed the CSS1 specification and support its adoption by the industry.

Microsoft and other software vendors have products that support CSS1; Netscape, Adobe, SoftQuad and Grif are among the W3C Members who will be adding support for CSS1 in their upcoming software releases.

With Hypertext Markup Language (HTML) content providers do not have the control they have in print media over color, text indentation, positioning, and other aspects of style. Today CSS1 offers a powerful and manageable way for authors, artists and typographers to specify the visual presentation of an HTML document or collection of documents.

“The Web’s main document format, Hypertext Markup Language (HTML), was intentionally designed as a simple language that valued document structure over document presentation. However, with the commercialization of the Web, presentation of Web documents is becoming increasingly critical,” said Tim Berners-Lee, Director of the W3C and creator of the World Wide Web. “CSS1 brings HTML authoring to the next level by effectively combining the structure and content of Web pages with powerful presentation capabilities. We look forward to the industry’s further adoption of CSS1.”

“CSS1 is a powerful tool. It can alter the look and feel of an entire web site simply by changing a single style sheet,” said Håkon Lie, co-architect of CSS1. “CSS1 makes it very much easier to maintain a consistent style throughout the entire Web site. At the same time, CSS1 enables rich individual expressions that Web designers will appreciate.”

Creative web designers have tried to bypass HTML’s limitations by using images of text, which look like good typography but result in documents that cannot be searched, fed to speech synthesizers for visually impaired users, and do not print well. They have also used non-portable proprietary HTML extensions to gain control of spacing, and tables to simulate margins and indents. CSS1 allows designers to directly express the appearance they seek while retaining device-indepedent document structure, reusability, searchability and accessibility for the disabled.

“By separating the structure from the visual presentation of documents, we ensure the documents created today can also be displayed on the presentation devices of tomorrow,” said Bert Bos, co-architect of CSS1. “HTML has become a universal storage format that will outlast current computers. CSS1, when used correctly, assures that documents can be preserved without sacrificing aesthetics on the Web.”

It is expected that other specifications will build on CSS1 to provide support for Web fonts, speech style sheets, extended layout and printing capabilities. Also, W3C is actively working with its members to ensure that script-based applications can take advantage of style sheets. For example, a script attached to a Web page may dynamically alter properties, such as color, set in a CSS1 style sheet.

Please see attached fact sheet and testimonials document for additional information on CSS1.

Tags: CSS, CSS2, CSS3, web 2.0, XHTML

Comment

Web Designer's Tips & Tricks – Amit Roy

Latest Entries »

Web Interface Definition Language [WIDL]

Abstract

1. Introduction

2. Benefits of WIDL

2.1 Business-to-Business Integration

3. Object Model References

4. WIDL Reference

Major Elements

Minor Elements

HTML4 vs HTML 5

SEO-Advanced Text Linking Strategies

Place Plain Text Around Links

Varying Your Destination URL?

How Many Links Per Page?

What If My Link Has To Be My Name?

Building Accessible Static Navigation with CSS

W3C CSS3 Recommendations

New Cascading Style Sheets Recommendation from W3C

Recent entries

Browse popular tags

Meta

Friends & links

Pages

Monthly archives

Follow “Web Designer's Tips & Tricks - Amit Roy”