Nate Koechley's Blog

DOM Scripting Task Force - WaSP

Once again the fine folks at the Web Standards Project are helping us all move the industry forward, this time with the launch of their DOM Scripting Task Force as announced in their buzz archive today.

"The skillset of a front end programmer is a three-legged stool: structure (XHTML) is the first leg, presentation (CSS) the second, and behavior (DOM Scripting) the third," said Peter-Paul Koch, a prominent scripting expert and one of the founders of the task force. "These three legs should be equal, but at the moment the behavior leg is the shortest, least-valued and least-understood of the three, even though the DOM has been a W3C specification for seven years and enjoys relatively solid browser support."

They have a press release, a manifesto, and of course a website.

These topics aren't anything new necessarily, but it's good to see more and more developers picking up the torch. For more reading on this/these topics, check out these other posts from my blog: The Behavior Layer, Unobtrusively, and Semantic Markup - Create, Support and Extract.

If you eat and breath these topics, I'd love to hear from you and your resume.

DOM Scripting Task Force - WaSP

Once again the fine folks at the Web Standards Project are helping us all move the industry forward, this time with the launch of their DOM Scripting Task Force as announced in their buzz archive today.

"The skillset of a front end programmer is a three-legged stool: structure (XHTML) is the first leg, presentation (CSS) the second, and behavior (DOM Scripting) the third," said Peter-Paul Koch, a prominent scripting expert and one of the founders of the task force. "These three legs should be equal, but at the moment the behavior leg is the shortest, least-valued and least-understood of the three, even though the DOM has been a W3C specification for seven years and enjoys relatively solid browser support."

They have a press release, a manifesto, and of course a website.

These topics aren't anything new necessarily, but it's good to see more and more developers picking up the torch. For more reading on this/these topics, check out these other posts from my blog: The Behavior Layer, Unobtrusively, and Semantic Markup - Create, Support and Extract.

If you eat and breath these topics, please send me your resume.

Rendering CSS Efficiently - Insider Tips from Safari

I just came drown from altitude in the Himalayas, so I'm admittedly pretty far behind in my technology reading, email maintenance and blogging. That said, in beginning to catch up I came across this complex and interesting post from David Hyatt on his Surfin' Safari blog. For those of you that have been paying attention, Hyatt is a leading browser developer, having worked on Gecko at AOL, and in his current position largely responsible for the magic in Safari and Web Core.

His post deals with the challenges of rendering CSS:

One of the most interesting problems (to me at least) in browser layout engines is how to implement a style system that can determine the style information for elements on a page efficiently.

Hyatt has created a new, more efficient algorithm for doing this (and a few other related things). For the algorithm to work, it checks ten features of each DOM node. I'm blogging this because it presents a new optimization opportunity for web developers. By being mindful of these 10 items, and not needlessly failing the 10 tests, we'll take advantage of these new rending efficiencies in Safari. These aren't revolutionary steps, but there are situations where they will certainly be the tie-breaker between alternate approaches.

There are a number of conditions that must be met in order for this sharing to be possible:

1. The elements must be in the same mouse state (e.g., one can't be in :hover while the other isn't)
2. Neither element should have an id
3. The tag names should match
4. The class attributes should match
5. The set of mapped attributes must be identical
6. The link states must match
7. The focus states must match
8. Neither element should be affected by attribute selectors, where affected is defined as having any selector match that uses an attribute selector in any position within the selector at all
9. There must be no inline style attribute on the elements
10. There must be no sibling selectors in use at all. WebCore simply throws a global switch when any sibling selector is encountered and disables style sharing for the entire document when they are present. This includes the + selector and selectors like :first-child and :last-child.

In web development there are often 6 different similar ways to do the same thing. What makes a good web developer is continually choosing the best of nearly-indistinguishable paths. These insider tips from Hyatt give us a more complete understanding of the guts of the browsers, and will help us choose the best methods.

Read about it in his own words here: http://weblogs.mozillazine.org/hyatt/archives/2005_05.html#007507

Yahoo! 360 Launch, with Overview and Thoughts

Yahoo! 360 launched and began its invitation-only beta period today. Yahoo! 360 is a new product that allows you to easily share stuff with the circles of people in your life. It's a social site, letting your connect with family, friends, friends-of-friends, and new people with whom you share interests.

Eric has a nice post up called Why 360 is not a Blog, and Jason has some good comments on target audience complete with a plea to invite your mom. Troutgirl wrote a thoughtful piece too that's well worth reading.

So far I've been very impressed. I guess I'm what Jason has called a capital-W Weblogger of sorts, but I recognize that this service is for a different part of my online life. Not necessarily a place to build my career, forward the Debate, or even publish my complex travelog, it's instead a great place to spend time, share things frivolous and intimate with friends and family, and benefit from my off-line connection online.

I can only imagine that this will spread its reach and therefor its value. Already you can share quick blast messages and longer blog (or journal) entries, as well as personal messaging. Photo sharing is integrated, as well as your music from Yahoo! Music LaunchCast station. Groups are there, and definitely some other things I'm forgetting about right now.

One of my early favorites though is over in Yahoo! Local (the web's best yellow pages and location based search). Here you can see your relationship to the authors of user reviews for things including restaurants, parks, dentists and mechanics. If you look around the Yahoo! network it's easy to see many sites where Y~360 may add significant value. As I said in the comments on Troutgirl's entry, I can definitely imagine sending a message to a friend (or friend-of-a-friend) that's written a review to ask follow-up questions on restaurants, dentists and mechanics.

All and all, I offer an unqualified congratulations to the entire 360 team: Well done.

(And it's LSM too! With Progressive Enhancement and Unobtrusive Javascript!)

Let me know if you're interested in an Invite, I still have a few left.

Evolution vs Revolution in Web Standards

CNet's Paul Festa filed a story today, Fight over 'forms' clouds future of Net applications, with a subhead of "As Net heavyweights vie to define the next generation of Web applications, the Web's main standards body is facing a revolt within its own ranks over electronic forms, a cornerstone of interactive documents."

The article sheds some light on the WHAT-WG, as well as some of the players in this general saga. The most interesting section to me:

WHAT-WG members say the forms dispute illustrates a larger conflict over whether the W3C should proceed in a "revolutionary" mode, tackling problems from square one and coming up with technically elegant solutions--even if that results in the loss of backward-compatibility with older browsers--or an "evolutionary" mode, maintaining older technologies like HTML 4 and extending the usefulness of current browsing software.

I also enjoyed Steven Pemberton's comments:

"The WHAT approach works OK for small examples," Pemberton said. "But actors like the Department of Defense say 'no scripting.'"

And:

"I understand where WHAT is coming from, but they are browser makers, not forms experts," Pemberton said. "It is important to build something that is future-proof and not a Band-Aid solution. Forms (technology) is the basis of the e-commerce revolution and so it is important to do it right."

[All emphasis mine.]

News from the World Wide Web Consortium

For better or worse, I only catch up on my W3 reading every month or so. That said, here's the stuff that caught my eye recently:

• Call for Participation: W3C Workshop on Frameworks for Semantics in Web Services
• Working Draft: Glossary of Terms for Device Independence
• W3C Launches Voice Browser Activity
• 'Architecture of the World Wide Web, Volume One' is a W3C Recommendation

Today’s Wrong Solution is Tomorrow’s Constraint

Layered Semantic Markup (LSM) is not a technology, but a framework comprised of HTML, XHTML, Cascading Style Sheets (CSS), Javascript, DOM and other Web technologies. LSM allows for appropriately implemented principles and standards.

LSM is a development framework for creating Web documents and experiences. LSM builds for the least capable devices first, then enhances those documents with separate logic for presentation, in ways that do not place an undue burden on baseline devices but which allow a richer experience for those users with modern graphical browser software. LSM supports all user agents, and is inclusive by design. (Progressive Enhancement - Unobtrusive Javascript)

LSM has structural semantic markup at its core, which provides lean, meaningful, accessible pages. This well-built core and the clear separation of structural, presentational and behavioral layers make this development philosophy superior to many short-sighted approaches.

Today’s wrong solution is tomorrow’s constraint. A holistic vision - an underlying philosophy - must guide technical decisions. LSM provides the strategy for a sound and future-ready approach.

LSM embraces Graded Browser Support by using one markup document, subsequently layered with stylesheets and scripts that provide a gradually enhanced experience across a wide variety of browsers and devices.

This approach has profound advantages over other browser support approaches such as graceful degradation. Graded Browser Support recognizes that advanced technology support is not a guarantee of the future, and that legacy software as well as alternative devices (mobile) must always be considered. Graded Browser Support defines support in terms of current capabilities, not in terms of legacy or obsolete software; it embraces accessibility, universality, and peaceful coexistence with more feature-rich browsers/devices; and it allows for adoption of new technology and strategies without leaving any browser/device behind.

Credits

This work is heavily influenced and contains directly passages from Debra Chamra's "Progressive Enhancement: Paving the Way for Future Web Design", Steven Champeon and Nick Finck's presentation "Inclusive Web Design For the Future with Progressive Enhancement", and Steven Champeon's "Progressive Enhancement and the Future of Web Design", all of which may be found here.

Thanks also to the great people who have endlessly debated and developed these topics with me: James Berry, Sean Imler, Todd Kloots, Jon Koshi, Mike Lee, Thomas Sha, Matt Sweeney, Chanel Wheeler, and Christina Wodtke; and everybody else; and to everybody who puts their ideas online so that others may be inspired. Thanks.

Douglas Bowman's presentation from Web Essentials 2004 in Sydney

Doug Bowman, of Stopdesign and adaptive path, famous for the Blogger and Wired News redesigns, posts his great presentation Pushing Your Limits (And Other Secrets of Designing with CSS) from the Web Essentials 2004 conference in Sydney.

It's a great presentation, and beautiful too. Whether you know your CSS or not, it's well worth a click-through.

Accessibility Conference slides

Slides are up from the accessibility Conference at the University of Central Lancashire from 2004-06-23.

Speakers include:

Bob Regan - Macromedia Inc.
"Accessibility in Rich Media for the Web"
With the growing importance of rich media and multimedia on the web, it is important for educators to address issues of accessibility. This presentation looks at accessibility in the context of rich media, providing an overview of standards, common concerns and remedies to everyday issues. Real life examples will be used to provide a context for the issues presented.
Breeze Presentation + Slides

Jim Byrne - Making Connections Unit
"What is an accessible website?"
Examining common definitions of accessible web design, and discussing their practical implications for web ublishers/designers. By looking at accessible web design from the producers point of view (i.e., taking into account the reality of limited time and resources), and not just concentrating on consumer needs, we can derive some important practical lessons to help us in produce accessible sites. This approach leads to more flexibility, which (ironically) meets the needs of a greater number of end users.
Breeze Presentation (followed by Zoe Neumann) + Slides

Zoe Neumann - RNIB
"Is it legal? You decide..."
In this session, I will recap the requirements of SENDA and present some e-learning experiences students have described. The audience will consider the experiences and vote on the legality of the provision, how beneficial adjustments can be made and ponder "inclusion".
Breeze Presentation (Preceded by Jim Byrne) + Slides + Transcript of slide 21

Hard Working George

Hard Working George -- it's hard work.

The Behavior Layer - Unobtrusively

I've been working on a framework called Layered Semantic Markup for I guess a few years now. While I spend most of my time considering the Structural Layer (Content, aka HTML) and the Presentation Layer (CSS), there is a third layer: Behavior Layer (scripts and the DOM). Having stable and appropriate Content and Presentation layers are helpful before one can appropriately address the Beharior Layer, which is why I've spent my time as I have.

A foundational idea of Layered Semantic Markup is Accessibility (and not just in the Section 508 of Accessibility for indivisuals with disabilities). Content should be accessible to ALL. Content should be available without Presentation. Presentation should be available without Behavior. In other words, each can only reach their potential (and some would argue bare minimum) if they are isolated and independent.

I don't want my snazzy Javascript DHTML behaviors (which makes my navigation more efficient to desktop computer users) to make my navigation unusable to cell phone browsers. With a nod to "One man's treasure is another man's trash", what's good for one user may be detrimental to another.

With this in mind, take a look at this great tutorial on how to write an Unobstrsive Behavior Layer, or as the author brands it, "Unobtrusive Javascript .

Javascript is a wonderful tool to enhance the usability of web sites. It is the extra layer above the mark-up 'what is this text' and the CSS 'how should it be displayed'. Javascript adds a new dimension, the 'how should this element behave'.

On the following pages we will discuss and see how we can use Javascript, but still maintain accessibility. The technique to completely separate Javascript from the other two layers of web development has become commonly named 'unobtrusive Javascript', as 'accessible Javascript' does not quite cut it. You can have a perfectly separated Javascript and still be totally inaccessible.

Hat tip to little. yellow. different's mini-blog.

Layered Semantic Markup hits the big-time at Yahoo!

I'll post some more details when I get a second, but I wanted to quickly point out that the new launches of http://www.yahoo.com/beta and my.yahoo.com are among the most visible examples of Layered Semantic Markup on the Yahoo! Network.

Isn't the markup beautiful! Isn't the CSS wonderful?

Congrats, one and all!

Video of Screen Readers in Action

I suppose I've talked about this before, but it came up again at work today:

"Introduction to the Screen Reader" with Neal Ewers of the Trace Research Center is a short 6 minute video demonstrating how screen readers assist people who are blind navigate the web, access the electronic page, and more.

That and more: http://www.doit.wisc.edu/accessibility/video/.

If you're involved in web design or web development, or if you spend time thinking or working on accessibility, it's well worth your time to watch this and the related videos.

Introducing sIFR

Mike Davidson, in conjunction with Shaun Inman and Tomas Jogin has released "a scalable, multi line, Flash 6 compatible version of IFR to help you reduce the amount of browser text in your life and free the world from the scourge of Arial."

This system uses JS, DOM and Flash to provide scalable, typographically-rich headlines and font treatments through dynamic replacement of H1, H2 and DIV tags.

Seems interesting.

I'm historically pretty anti Flash. I believe in HyperText and meaningful, semantic markup. I believe in access to information to all. I believe that pure text is faster, better, and more "Web". Just being up front about it. (On the other hand, I also believe in Progressive Enhancement, which is consistent with this approach.)

So I'm not yet sure what I think about this technique.

I know I'm more fixated on edge cases than many people, and that my work necessitates a never-wavering focus on speed, performance and efficiency, and that I have strong feelings about the benefits of "built-in" usability. But...

One reason I generally don't like text as images is because you can't select or copy-paste the content when it's locked in an image. Organizations that have their address locked in an image prevent me from Yahoo-mapping their address and therefore lose my business.

My first test was to select the text of this flash headline. Happily, I was successful (though it's pretty clunky, and much more difficult than normal HTML text).

One of Flash's historic downsides is that .swf text is more or less unknown to the browser. They seem to have fixed this for mouse-based text selection, but using the keyboard doesn't seem to work. Modern browsers have started introducing "Find As You Type" functionality, which lets you navigate (and select) the text of a page from your keyboard. This isn't compatible with sIFR in my testing. Further, the standard "Control-F" on-page search isn't aware of sIFR text. I, and many people, use Control-Find often. That IFR is for headlines instead of body content is some consolation, but... I'll lump those together as one strike.

I wonder how well .swf text is indexed by search engines? I don't have an easy way to test this, but because I can't select the .swf text via the keyboard, and because test uses of Control-F "find" failed, I'm skeptical.

Interesting technique. Definitely one to keep an eye on.

Cheers
Nate

Web Visions Presentation

First Things First: IA and CSS

With apologies for the delay, here are links to the presentation Christina Wodtke and I delivered at the webvisions 2004 conference this past Friday in Portland, Oregon.

Creating Structured Tables

Webgraphics points to this short article detailing the elements and attributes used to create structured tables. It takes a simplified table and add structural and logical markup, introducing one element at a time.

Accessibility Comes For Free

Jeffery Veen writes a nice piece on his blog called I don't care about accessibility. (It's from his speaking notes at SXSW-04.)

He uses a term spectrum of degradability, which is very similar our thinking that has lead to

This content has been censored during migration from my behind-the-firewall blog to this public one.

:

Their designs are explicitly intended to work in what we call the spectrum of degradability -- that is, consider the current Mozilla in the middle, with less advanced and broken browsers like Blazer, Netscape 4 and IE6 on one end, and more advanced browsers like OmniWeb, screen readers, and other accessibility devices on the other.

It's noteworthy that he puts omniweb and screenreader agents on the the more advanced side of the stectrum.

Veen's dead on though, and we XXXXXXXXX's have been touting this too:

...when Web design is practiced as a craft, and not a consolation, accessibility comes for free.

Enhancing your work for browsers that support it

Here are some snips from Mezzoblue's call to action, which he dubs Mozilla/Opera/Safari Enhancement, or MOSe for short.

The point is to provide IE a way out by using CSS it has no hope of understanding. This is the only way we can keep moving forward in the next few years. Let�s embrace it.

We�re stuck with Internet Explorer for the next 3 years bare minimum, most likely 6. Let�s start thinking about how we can move forward.

After creating a basic, functioning page in IE, you add extra functionality with these selectors. While IE can�t render them, at least it doesn�t make a half-hearted attempt to and come short.

Great CSS Design - gathered by Dave Shea

Dave Shea lists his favorite standards-compliant sites.

CSS Properties To JavaScript Reference Conversion

This content has been censored during migration from my behind-the-firewall blog to this public one.

Another Web Standards presentation - maxdesign.com

The benefits of Web Standards to your visitors, your clients and you

14 nice slides of what/why/how of LSM.

1. The Web Standards
2. What are Web Standards about?
3. A mindset change
4. Semantically correct markup
5. What is valid code?
6. What is accessible code?


7. Why use CSS to separate content from presentation?


8. A CSS based site in action


9. How do your VISITORS benefit from Web Standards?


10. How do your CLIENTS benefit from Web Standards?


11. How do YOU benefit from Web Standards?
12. What are the downsides


13. How do you achieve Web Standards?


14. Web Standards resources

The C in CSS

Adactio says that they've started added an ID to the body tag of their various page types. This way that can have all their CSS in one file, and still maintain different looks for different page types.

So i guess the CSS would look like this.



<style>
#top_page h1 {
     font-family:arial;
     font-size:2em;
}
#internal_page h1 {
     font-family:verdana;
     font-size:.83em;
}


<body id="top_page">
<h1>Welcome to Yahoo</h1>
</body>

<body id="internal_page">
<!-- maybe a news article page -->
<h1>Kerry narrowly wins Wisconsin</h1>
</body>



Seems like an interesting approach. We've alreayd been doing this, but making the selector-ceiling various container divs instead of utilizing the body tag itself.

Introduction to Composite Capabilities / Preferences Profile (CC/PP)

The work we do on the Web today is reaching to devices far beyond the conventional computer. A range of technologies is emerging in an effort to solve problems related to delivering content to a growing number of devices. One such technology that has been under study and development for some years is Composite Capabilities / Preferences Profile or CC/PP for short. This month, WaSP asks the W3C to explain more about CC/PP and how it relates to Web designers and developers.

CSS Beyond the Retrofit

CSS Beyond the Retrofit

From the abstract:
Today's contemporary browser support and the availability of smart workarounds make the promise of CSS more real than ever. Molly Holzschlag shows you how CSS was meant to be used and demonstrates how to begin using it fully today to make your life (and your designs) more efficient, flexible, and even more beautiful than ever.

http://www.informit.com/content/images/art_holzschlag_css-beyond/elementLinks/fig01.gif

The Behavior Layer - Accessible Javascript

Digital Web Magazine - Keep It Simple: The Behavior Layer

Now that Web developers have a solid grip on the XHTML structural and CSS presentation layers, it�s time to consider the JavaScript behavior layer and especially its accessibility.

We have now added a behavior layer to our simple page. It lies on top of the structural layer, and next to the presentation layer. This means that instead of two views we suddenly offer four.

Web Design References - UM-Duluth

Web Design References

produced by Laura Carlson and her colleagues at the University of Minnesota Duluth, is a mega-reference containing over 3,000 links to information and articles about web design, with an emphasis on web standards and accessibility. The site practices what it preaches: it�s marked up in XHTML 1.0 Strict; meets WGAG Triple A (AAA) plus Section 508 access guidelines; and uses CSS for layout. A listserv and an RSS feed help you keep track of site updates. Bookmark it.

Advanced Tables

Advanced Tables

Well, if you are getting tired of all this endless talk and news about CSS, there is hope yet. It's time to talk about good old fashioned tables and what they are intended to be used as. Here is a great tutorial on Advanced Tables. [from Web Graphics]

Drawing with CSS (charts, graphs, etc)

Drawing with CSS - how to draw simple charts using basic CSS elements.

from "Web Page Design for Designers – Editorial January 2004

CSS has the ability to draw rectangles with borders and fills. With a little bit of lateral thinking, it doesn't take too much effort to draw simple business charts. Okay, it's not as instant as Excel, but much lower in bandwidth requirements than any image file.

XHTML Modules and Markup Languages -- How to create XHTML Family modules and markup languages for fun and profit

http://www.w3.org/MarkUp/Guide/xhtml-m12n-tutorial/

XHTML Modularization provides a structure for the creation of new markup languages through the extension of the XHTML Core modules and the use of the XHTML Module Framework. In some instances, people will want to create complete, proprietary markup languages through these mechanisms. In other instances, people may wish to create new, reusable modules that will be used by their organization or by others in the definition of markup languages. In either case, the mechanics of the modules added and the markup language definition are the same. This document describes the manner in which such modules are defined, and the way in which modules should be combined to create new markup languages.

XFN (XHTML Friends Network)

XFN (XHTML Friends Network)

Much ado about relationships - Eric Meyer has announced XFN (XHTML Friends Network). This is what I would term as a stripped down implementation of FOAF. Now typically I would debate why anyone would want to create just another FOAF, but Eric made some good points. If we look at the adoption rate of FOAF you can see that is has been anything but a movement in the web scene. XFN hopes to remedy that situation through simplification and thus ease of use. I wish best of luck to Eric and crew, it's not going to be easy... but at this point I would rather see something, anything, adopted than nothing at all.

thanks http://www.digital-web.com