Advanced CSS Design Resources - last-child.com » AJAX

Yahoo! Boss now features keywords and more language support

Ted — Wed, 19 Nov 2008 07:33:32 +0000

The Yahoo! Developer Network blog just published a blog post with new Boss features: Yahoo! Search BOSS Releases Key Terms. There are a few key details in this article.

Key terms are now available: Each result now includes the keyterms Yahoo’s search index has assigned to the web page. This is the same information Yahoo! uses for search suggestions. I was trying to recreate this by using key term extraction in Yahoo! Pipes. But this would have involved multiple requests and slowed the page down. Boss’s inclusion of keyterms opens a whole new world of semantic search options. I’m using them to display related results on V3GGIE.
Extended language/region support: I was in Romania a couple weeks ago discussing Yahoo! Boss with some students in Bucharest. I noticed we didn’t support the Romanian language in Boss. I was able to send a few emails asking for support and voila, the Yahoo! Boss has not only added Romanian, but also Turkish and Hebrew! That is some fast turn around and shows their commitment to the users.
Boss made easier: Christian Heilmann has been creating Boss plug-n-play projects. You can get a JavaScript Boss badge, grab all the keyterms in one arrray, and recently a build your own site search in 3 easy steps lesson.
The article also has a link to a new site I’m developing: Tartin3. This is still in the development stages and is a prototype for a much larger site InsiderFood.com. ~~I’m hoping to take the covers off Insider Food within the next couple weeks.~~Insider Food is now Live – but in Beta mode as I fix bugs and make enhance the search logic

Disclaimer: I work for Yahoo! but I’m not on the Yahoo! Boss team. I’m their “customer”, as I use Boss for multiple projects outside Yahoo!. I also am a member of the International Yahoo! Developer Network, which allows me to demonstrate and teach some of the Yahoo! API’s and services.

ARIA support with the YUI library

Ted — Wed, 06 Aug 2008 16:15:51 +0000

AJAX and DHTML have made web sites more interactive and easier to use. At least for visitors who are not using a screen reader. Screen reader users have to struggle with pages that lose focus, change without prompting the user of new data, and much more. However, there are many developers working on solutions to this problem.

Todd Kloots, of the Yahoo User Interface group was one of the first to develop accessible javascript libraries with the YUI menu package. He just published a blog post on the YUI web site about adding ARIA support to the YUI tab package. This information could also help you add this functionality to your existing YUI-based applications.

Here’s how Todd describes the goal

The YUI TabView Control is built on a strong
foundation of semantic markup that provides users with some basic accessibility. But while TabView looks like a desktop tab control, screen readers don’t present it as an atomic
widget, leaving users to figure out how the various HTML elements that compose a TabView relate to each other. However, through the application of the WAI-ARIA Roles and States, it is possible to enhance TabView’s accessibility such that users of screen readers perceive it as a desktop tab control.

Enhancing TabView Accessibility with WAI-ARIA Roles and States – Todd Kloots

The following video shows how this approach works with Firefox and a screen reader.

YUI TabView with ARIA roles and states/Todd Kloots @ Yahoo! Video

Storyboard your DHTML interactions

Ted — Fri, 28 Sep 2007 22:04:26 +0000

Bill Scott gave an interesting lecture today at Yahoo! about AJAX design patterns. He explained how good AJAX designs keep the user’s attention on the page, remove roadblocks, and increase stickiness to a site.

Patterns of successful AJAX behaviors are beginning to appear (Netflix, 37Signals, Yahoo!). There are subtle, and sometimes not so subtle, changes that can occur to let a user know that an action has happened.

Download the drag and drop storyboard design package

For instance, he pointed out an interaction on the recently departed Yahoo! Photos site. A user could select multiple photos and then drag them to special collection folders. The page generated several panels to let the user know that the move would go to the preferred folder (hit yes), wait for the action to finish, and then a final congratulations panel (hit yes). These panels and the two required clicks could have been avoided if the folder changed when the photos were dropped into it. This could be a simple glow and maybe the number of photos in the folder is increased.

Plan your entire sequence in advance

Eric Miraglia coined the phrase Interesting Moments to describe the multiple changes that occur during an AJAX/DHTML action.

In most cases, Drag and Drop requires that you write code to respond to the interesting moments in the interaction: when the drag event starts, when the dragged object enters another object, and so on.
Yahoo! UI Library: Drag & Drop – Interesting Moments

Your user will have a much more pleasant experience if these are considered in the beginning of production. The Yahoo User Interface library includes a storyboard template (.zip) for planning these interactions effectively. This story board concept also works well for forms (especially form validation actions) and Flash components.

Update

The YUI blog has posted a video of Bill’s lecture: YUI Theater — Bill Scott: “Designing the Rich Web Experience: Principals and Patterns for Rich Interaction Design on the Web”. This is a great opportunity to learn from one of the finest developers around.

YUI 2.5.2 Released, Big Focus on Firefox 3 and Opera 9.5 Support [via Zemanta]
Pingdom checks on JavaScript usage on top sites [via Zemanta]
A Need for Information and Interface Design Pattern Websites [via Zemanta]
Social Design Patterns for Reputation Systems: An Interview with Yahoo’s Bryce Glass (Part II) [via Zemanta]

Aggregate RSS from all over the web with Yahoo! Pipes

Ted — Thu, 08 Feb 2007 17:19:26 +0000

Yahoo! has been thriving on hacks. It’s quarterly Hack Days have given engineers the opportunity to build radical and sometimes silly alterations of existing services. Once in a while, these hacks are truly revolutionary. Enter Yahoo! Pipes.

This super cool project started as a Hack and has now become an official project. How cool is it? Think of the impact Digg, Flickr, Delicious, Technorati, and YouTube had on the internet in 2006. Pipes has that potential!

So, what is this potential “Segway” product? Pipes allows you to create aggregated feeds to publish on your own site.

Lets say you wanted to create a web page about Pizza in someone’s local area. B.P. (Before Pipes) you would have to write code for a form requesting a zip code, you’d then have to write code to request the appropriate rss feed from Yahoo! Local for restaurants, Epicurious for recipes, Craigslist for pizza loving personal ads, Flickr for images of pizza, etc. You’d then have to parse the XML and build modules to display the information.

That’s a lot of work for a simple project.

Enter the Pipe

Pipes allows you to do all of this in a simple drag and drop interface. I first used it in its early Alpha stage and it took me about 10 minutes to figure out what was happening. They’ve steadily worked on the interface and you can accomplish the above tasks in about 5 minutes. You can then use their tools to publish the results to your own blog or web site.

Mashing up has now become easier than opening a box of potato flakes and adding water. This is big folks, really big.

Here’s how the Pipes team describes their goal

Pipes is an interactive feed aggregator and manipulator. Using Pipes, you can create feeds that are more powerful, useful and relevant.
pipes.yahoo.com

It ain’t perfect… yet

Pipes does have some rough edges, there’s no doubt about it. It’s not very accessible, but they’re working on that right now. If you have suggestions or find bugs, let them know.

Enjoy this site as the super-cool, revolutionary site it is. It’s was created with passion and hard work by a small devoted team. They’ve got the spirit of a startup with the power of Yahoo!

Enjoy the new A.P. Era (After Pipes).

Add accessibility to your AJAX applications

Ted — Fri, 19 Jan 2007 18:13:25 +0000

In December, I made a number of predictions for the 2007. I confidently predicted that Gez Lemon would discover a solution to AJAX accessibility issues. Gez had earlier defined the virtual buffer’s role in JAWS.

Understanding the virtual buffer is essential for empowering screen reader users, particularly considering the number of Web 2.0 applications that depend on Ajax. Screen readers typically take a snapshot of a web page, and place the content in a virtual buffer to allow the user to interact with the content.
Gez Lemon and Steve Faulkner – http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php

Gez and Steve Faulkner have just released a set of javascript functions that refresh the virtual buffer by working with setAttribute. They discovered this function triggers JAWS 7.1+ screen readers to grab a new snapshot of the page.

The scripts are fairly simple. When the page loads, insert a hidden form input. When your AJAX application completes its duties, change the value of that hidden input with the setAttribute function. This setAttribute activity will refresh the buffer and the screen reader will announce the content that has been changed via an AJAX call.

The updateBuffer function presented here extends the limited improvements in JAWS 7.1 and later, by providing a mechanism to update the virtual buffer for other interface elements, that works regardless of input device. This means that users of JAWS 7.1 and later do not need to explicitly update the virtual buffer in order to interact with Ajax applications.
Gez Lemon and Steve Faulkner

As I also predicted, I believe the YUI Connection Manager will incorporate this type of functionality. This will give enhanced accessibility to thousands of web sites instantaneously.

2007 Web Development Predictions

Ted — Fri, 01 Dec 2006 18:51:00 +0000

The standardistas were abuzz a year ago with hopeful predictions for the coming year. Visions of sugar plums dropping rounded corners, AJAX, and alpha transparent pngs danced through their heads. 2006 has been a great year for web development. Did we get what we wanted? Did we get too much of what we wanted? Further, what lies ahead?

Getting drunk on the possibilities and waking up to sober reality

It could be argued that 2006 was the year of AJAX and DHTML. They matured this year and solid libraries were released. The Yahoo User Interface Library makes a JavaScript mangler like me seem downright competent. Not only that, it’s got some good accessibility and security built in. Gez Lemon and others have been tearing apart AJAX for a possible accessibility hook that makes all of us happy. JSON gave us new ways to transfer information.

Yes, we got giddy with the possibilities. I helped build Yahoo! Tech. It’s a great site, if I do say so myself. We launched with every flash, web 2.0, animation, AJAX driven widget imaginable. Someone even called it “an explosion of a web 2.0 factory.” The site was accessible, harnessed the powers of a web-service architecture, and was the first completely new site for Yahoo! Media in a long time. But the web 2.0-ification was the star in many people’s eyes.

A funny thing happened over the months after launching. We got rid of the flash on the home page. We removed the dynamic width widget. We removed some animations. We began removing these Web 2.0 stars because the users didn’t use them AND they made the site performance horrible. Yahoo Tech, like many other sites, learned an age-old lesson. Just because you can, doesn’t mean you should.

Prediction #1 – In 2007, AJAX and DHTML will be used reasonably.

I predict new sets of AJAX/DHTML libraries will be released with great features and accessibility. People will go gaga over a few sparkly ideas and ultimately settle with good sites that use the libraries reasonably. I predict AJAX will be used less often as commercial sites realize they need page refreshes for advertising revenue. AJAX will continue to be used for features that significantly help the user’s experience (Yahoo Finance Streaming Quotes) and not so much for page level mechanisms (Yahoo! Tech Search).

No More Rounded Corners

I hate rounded corners. They were fashionable for a year and everyone had to have them. You could build them with 15 nested divs, with javascript, with extra paragraphs, extra this, that and the other. Die rounded corners die!

Seriously, rounded corners add a bit of visual white space but they’ve gone overboard. They’ve hit the designer’s toolkit like a bad font and are being used because people feel like that have to use them. It’s time to be creative again and kill rounded corners. Please!

Prediction #2: Rounded Corners Replaced With Dancing Hamsters

Let’s look at alternate container variations. Put rounded corners on the shelf next to drop shadows and let’s explore line quality, tonality, texture, and contrast instead.

Accessibility is a big deal and then it isn’t

Accessibility for web sites will become a big deal in 2007 as the Target lawsuit comes back and someone figures out a way to make AJAX accessible and easy to implement. I’m putting my money on Gez Lemon finding a solution and the Yahoo! User Interface Library making it available.

Firefox, Apple, Yahoo!, Google, IBM, Sun, and who knows what other companies will come together and agree that there is a particular way that these things should be done and will create some resolutions. After these things happen, you will see more and more sites become accessible without even trying. Platforms such as WordPress have already made huge impacts in setting up sites to be accessible from the beginning. Look for more advances from Microsoft, Adobe, and more.

Apple will release their new OS with extended assistive technologies built-in. Existing screen reader companies will have to deal with a big new competitor. Watch for Jaws, et al to scurry around fixing outstanding issues to hold onto their audience.

Prediction #3 – Accessibility for All

Even if JaneDoe43 is simply dragging images into her MyLinkedInSpace page, it will have the hooks necessary to be accessible. Platforms and libraries will make it easier for people to worry more about content and less about rules. The web will be a better place for novice and advanced programmers. It will certainly be better for those that need assistive technologies.

IE7 opens the possibilities

Internet Explorer 7 has been released and will soon see adoption rates increase significantly. Vista is ready to also increase the graphic processing potential for millions of users. As web developers, we have new tools in our kit to work with. Start studying your attribute selectors, pseudo selectors, and playing with alpha transparencies. 2007 will see the death of Internet Explorer 6. It will still sit on a small percentage of machines, but IE7 will take over and with it comes hope.

Prediction #4: CSS2 and CSS3 Get Used

Start looking at progressive enhancements with your CSS. Give Firefox, Opera, Safari, and IE7 the best possible experience. You may have to dumb down some of the IE6 images but go for the beauty and simplicity that advanced CSS offers.

Where’s the new blood?

The standardistas of the past are busy working on big projects now. Sure, they’re still doing some innovative stuff. But where are the young guns inventing wonders like Son of Suckerfish, Microformats, CSS Zen Garden,Image Replacement, SIFR, and god-forbid the image-free rounded corners? Seriously, it’s time for some exciting developments to come from people recently discovering web standards and bringing a new approach to solving issues. Who knows who will be the next Erik Meyer, Big John, Andy Budd, Shaun Inman, PPK, etc. Who’s gonna carry Joe Clark’s torch for being the genius with a cattle prod as he solves the captioning dilemna next year?

Prediction #5 – New Standardistas Rock The House

Further, these new standardistas are going to come from Asia, India, South America, and possibly the United States and Europe. They’ll have us on the edge of our seat as AListApart releases the latest tools to completely change the way we build sites. My number one pick for standardista of the future goes to Hedger Wang who tirelessly experiments and publishes little teasers on a regular basis.

I can picture the @media 2008 conference in Singapore with Molly, Andy, PPK, et al lining up for a chance to rub shoulders with the new greats.

Making AJAX work with screen readers

Ted — Thu, 25 May 2006 16:21:46 +0000

Gez Lemon and Steve Faulkner have published an excellent description of how screen readers react to AJAX and what you can do to make your AJAX-powered pages more accessible. Making AJAX work with screen readers is a comprehensive description of the mechanics behind screen reader behavior, workarounds, and theory. Hats off to these programmers for laying out a clear description of the issue.

Web 2.1

Ted — Thu, 20 Apr 2006 02:31:09 +0000

Enter…. the server-side, AJAX powered blink. I can’t wait for Marquee 2.1

FLORWAX – Mobile 2.0?

Ted — Fri, 10 Mar 2006 16:39:23 +0000

I sat next to Adrian Cockcraft on the plane up to San Jose yesterday. He just finished the ETech conference in San Diego.

He told me about his concept of bringing the Web 2.0 infrastructure to mobile appliances with some consistency. FLORWAX uses flash with AJAX like behaviors built on the Ruby on Rails platform. It’s just an accronym at this point. Let’s see if there’s any traction for this approach.

DHTML Utopia – book review

Ted — Mon, 27 Feb 2006 01:36:40 +0000

This is a difficult book to read for non-javascript programmers. If you are more comfortable with HTML and CSS, I’d recommend reading Jeremy Keith’s DOM Scripting first. Keith explains the theories behind this book.

That said, I did learn enough from DHTML Utopia to not look like a complete idiot during my job interview with Yahoo. This book is filled with project examples for you to follow along with. I will say that I tried several of the examples and had mixed results. I visited the book’s web site to get updated code.

If you’ve already worked with Javascript, this is a great book to have on the shelf. If you are a rookie, start with Jeremy Keith and follow up with DHTML Utopia.