Archived entries for References

W3C News: WAI-ARIA Suite Updated

The Protocols and Formats Working Group has published updated Working Drafts of WAI-ARIA Roadmap, Roles, and States and Properties. The suite describes accessibility of rich Web content using interactive technologies such as AJAX and DHTML. These concepts are further introduced in the WAI-ARIA Overview. The PFWG charter has been updated to allow the group to publish Recommendation-track documents. Accordingly, WAI-ARIA Roles and States and Properties are now intended to become W3C Recommendations; the Roadmap remains a draft Working Group Note. Visit the WAI PFWG home page.

Note that there is a new WAI ARIA introduction and overview document, and that comments are welcome until 19 January 2006.

How to Use YUI Grids for Fluid CSS Page Layout

For those of you not reading 24ways each day this month, allow me to point out that I wrote a tutorial for it that’s live right now. It’s called Intricate Fluid Layouts in Three Easy Steps, and teaches you how to build CSS layouts that work on all modern browsers effortlessly using YUI Grids. Enjoy!

Also, I suppose I should let you know that I’m flying out on a redeye flight tonight to start my winter holiday. I hope to write once more before shuttering things, but if I don’t get a chance let me be among the first to wish you a very happy new year.

On Appropriate Use of DIVs, or When Divitis Doesn’t Apply

Divitis refers to the misuse of the DIV element in markup. Too often, sites are converted to tableless by blindly substituting a <div> for each <td> and <tr>. Related afflictions are widespread: one prominent news site wraps each “paragraph” of content in a <div class="p"> element. This pointless mess isn’t an improvement, and tastes as bad as yesterday’s tag soup.

Markup’s job is to generously impart meaning. This principle of “meaningful markup” is core to Web Standards’ ethos. Divitis misses it completely.

But not all DIVs metastasize into divitis.

According to the authoritative W3C spec, DIVs are specifically designed “for adding structure to documents.” Reasonable examples include encapsulating distinct modules (e.g., this is the weather module; this is the module’s footer region) and grouping together modules that live in the same structure (e.g., these modules belong to the secondary group/column). This is the appropriate use of the DIV element.

If one pillar of the Web Standards pantheon says markup should exclusively describe content, the other pillar says presentation instructions belong to CSS exclusively: Markup denotes structure, while CSS renders it. Sometimes structure and page layout feel more like presentation than content, but in truth it is equal parts both. Structure communicated in markup – even when the structure is ultimately expressed visually – is the appropriate use of a DIV.

Web Site Optimization – Part 1

Over on the YUI Blog, Tenni Theurer has just posted part 1 in a series sharing what we’ve found by researching web site optimization. At conferences over the last six months I’ve given hints about some of our research findings, and told you there were more to come, and so I’m especially happy to finally have something to show. The #1 rule of better performance is to reduce HTTP requests. We’ll talk about how and why in future posts, but for now head over and read her first installment:

Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests

My Two Refresh06 Presentations

Phil Palmieri, Chad Cole, and the Refresh Orlando team put on a great web conference this month in Orlando, Florida, called Refresh06. I presented two talks, “Creating Accessible DHTML” and “The Yahoo! User Interface (YUI) Library”. Descriptions and download links for both talks are below.

Creating Accessible DHTML

The Internet’s dramatic shift from static to dynamic sites presents a series of new challenges to those committed to and dependent upon accessibility.

The Yahoo! User Interface (YUI) Library

The YUI Library (http://developer.yahoo.com/yui, http://yuiblog.com) is an open-source, a la carte JavaScript library for building richly interactive web apps using techniques such as DOM scripting, DHTML and AJAX. This library – free for the world to use – contains the exact same code that we use on globally and at massive scale on scores of Yahoo sites.

Conference Review

I really enjoyed myself at this conference because it reminded me how lucky we are to have such a passionate and dedicated community in our profession. In my experience, the web design and web development communities are earnest, passionate, and collaborative. (btw, cookies to the person who identifies the origin of that triplet phrase.) Given a choice, I’d always rather surround myself with people who love what they do. It’s fun learning, it’s fun sharing what we learn, and it’s fun bonding over common struggles.

I appreciated all the conversations at this conference. Because it was a relatively small event – about 65 people I guess – we all got lots of quality time. The big group dinners of 40 and 50 people were good, as were the 10-top lunch outing and obligatory pub duty. Here are just a few of the people I wanted to give a thank-you shout-out too (with apologies to the many I’m fogetting right now: Cyndi and Brian Fling from Blue Flavor in Seattle. Bruce Cooke, Varick , Joey and all the cool guys at nGenWorks, and Varick in particular for the great sketch (above) and permission to use it. Cindy Li, the Design Rabbit herself. Mike Girouard, aka Mike G, had a nice style full of passion for the web (he teaches at Full Sail, among other things). Janet Lynn Ford came down from Minnesota (midwest represent!), and we had a great talk about the ongoing stuggle for Accessibility. She and I have definitely been through some of the same things. Dave Hime and Rhodes Gibson were great contacts to meet. Their company, go9media does good work with an Accessibility focus – I look forward to working with them in the future. Jared Smith and I have some nice talks – though not as much as I’d have liked. He posted his User-center, Standards-driven Web Accessibility presentation on the WebAIM site. Faruk Ates, Jeremy Keith, Paul Boag, Andy Budd, Cameron Moll (great chat – happy for your plans!), Jina Bolton, Garret Dimon, Dan Rubin, Jason Garber. Last but not least, I was very happy to finally meet Stephen Anderson in person. Sharp guy, and his talk on the last day was one of the very top highlights for me.

For more about the conference, try a technorati search for “refresh06″, the event page on Upcoming.org, and the flickr tag for “refresh06″ sorted by interestingness.

Notes on the New YUI Library Update

I hope you already saw the good news over on the YUI Blog: We just released a new version of the YUI Library, bringing it to v0.12. We’ve been releasing updates about monthly, but this is a substantial one with several changes, and moves us beyond the v0.11 branch after several rounds of dot releases at that level.

What’s new in YUI v0.12? Thanks for asking:

  1. Matt Sweeney has contributed a potent new control, TabView, built with the same high-quality thinking obvious in his Dom and Animation utilities. Want to progressively enhance existing markup with useful but unobtrusive JavaScript? Us too. Prefer completely built-from-script controls? No problem. Want the tabs on the top, right, bottom, or left? All supported out of the box. You can populate the tabs with static on-the-page content, or, of course, pull it down on-demand with Ajax. It’s all good.
  2. Adam Moore has completely reworked our generated-docs API documentation system (see the API docs for Dom), and it’s pretty damn slick. It’s much smarter now, and provides richer information cross-linked in more usable ways. Don’t miss the autocomplete-powered search on the API Docs main page. I was happy to read Carson’s comment on the YUIBlog: “[the] new documentation about brought a tear to my eye.”
  3. Steven Peterson revisited his Calendar control in a serious way, and the results are great. In addition to the new and improved multi-calendar interface, he created in-depth tutorial-style examples of YUI Calendar highlighting all the key features and use cases for Calendar (as well as for the entire Container family). There has been more than one question on the ydn-javascript mailing list about how to do this or that with Calendar of Container, and he’s taken many of those and answers them definitively in the new well-written tutorials.
  4. Eric Miraglia did selfless work, as always, to offer some key new features on the YUI site. Don’t miss the YUI Theater, with its ever-growing collection of video lectures and instruction (including great content from Yahoo!’s Douglas Crockford, and Firebug’s Joe Hewitt). On the home page itself, notice the piped-in live content from the mailing list and our blog; I hope that will bring even more people into the conversation. On each component’s landing page, notice one-click access to all the examples from the right column under the component’s cheat sheet. Eric has also brought all the cheat sheets up-to-date to this release; there’s a new cheat sheets for YUI’s CSS foundation files (Reset, Fonts, Grids), and for TabView.
  5. The rest of the team has been busy too. Our director, Thomas Sha, improved Connection so that when you’re uploading files via setForm() and the asyncRequest includes a POST data argument, the appendPostData() method will automagically create hidden input fields for each postData label/value and append each field to the form object. Niiice. Jenny Han modified AutoComplete so that it’s a bit more efficient (always-on container don’t send show and hide events), and a bit more powerful (minQueryLength now supports zero and negative numbers). If the zillion options weren’t enough before, now you’ve got a zillion plus two. Todd Kloots didn’t rest either, and Menu now has more elegant internals, and a bit more functionality exposed.
  6. For my part, I completed a pretty substantial rewiring of YUI Grids. The most exciting change is that Grids now offers Liquid/Fluid Layouts out of the box. At what cost? Just seven-tenths of a kb of new page weight. In addition, there’s more power, more stability, and more flexibility across the board. I’m a big fan of fluid layouts, but if Fluid isn’t your thing this release also has 950px page widths baked in, in addition to the original 750px width. Best of all, if you don’t want to use Fluid or the two preset sizes, it’s super easy to set your own custom width. The Template Presets and Nesting Grids offer the same functionality as always, but they’re a bit more bulletproof now, and they now enjoy spreading their wings within the new page widths. As before, the entire system is in ems and percents, so it breathes with the user’s font size – a favorite accessibility and usability feature of mine. The new system is fully backward-compatible, so give it a shot and let me know how it goes.

I hope you enjoy all the new features in this release. I’d love to hear your feedback in the comments below, or straight on the ydn-javascript mailing list.

Thanks,
Nate



San Francisco, California | Creative Commons By-2.5 License | Contact

RSS Feed. This blog is proudly powered by Wordpress and uses Modern Clix, a theme by Rodrigo Galindez.