Update: I’ve removed the tabbed interface from V3GGIE.com. This particular use of the tabbed module seemed to have created some confusion in users. The approach is still valid, just not the way I originally implemented it. See the tabbed search form on V3GGIE.com

Step 1. Create the basic HTML code.

The tabbed code is a simple pattern:

1. Start with a parent div and give it an id and class=”yui-navset”.
   
2. Create an unordered list inside this div with class=”yui-nav”.
3. Each list includes a deep link to a corresponding div that is also a child of the parent div. The link text in an em tag.
   
4. V3GGIE Search
5. Create a div with class=”yui-content” and create a set of content containing divs. Each div has an id.
   
   ...

   ...

   ...

6. Insert the Tabview CSS at the top of the page, the Tab View JS at the bottom of the page, create a small js that instantiates the tab-view module.
7. For easier styling, use the sam_skin CSS package and add class=”yui-skin-sam” to the body.

Step 2. Use PHP to make it more interesting

Each page calls this chunk of code to insert the tabbed form, it also sets a variable ($selected), determining which tab is selected on page load. I’m also inserting the last search query into the text input to make it easier on the user. This is easily done by grabbing the query from the Request object.

The finished code:

View the source as a text file

The Final Product

We now have a tabbed module that allows the user to find recipes, news, blogs, and local restaurants from any page. This is an easy introduction to the YUI libraries. However, I came across the following surprises:

• The order of the tabs must match the order of the target divs. I moved my tabs around and discovered they were toggling the wrong forms.
• The links that generate the tabs need to have em tags surrounding the text
• You’ll need to download the entire YUI package to gain access to the CSS and sprites needed for the library. The examples on the YUI site assume relative links to files, you will either need to duplicate that file structure or upload the skin’s sprite and change the CSS accordingly.

Related articles by Zemanta

• Navigation bar with tabs using CSS and sliding doors effect
• Filament Group’s Accessible Extensions
• jQuery Nested Menu
• The lessons of CSS frameworks
• Rounded tabs with Dijit
• Dynamic CSS (Yet another follow up)

This open approach lets anyone build a search engine to their particular skills, mash the data with other sources, re-arrange results, or any other novel idea for the next king of search. You could also use BOSS to add search capabilities to a pre-existing site, limiting the resuts to just its data.

Why is Yahoo! doing this? It’s a brash approach to push search beyond its current status of pages with ordered sets of links You can let your imagine fly with the only cost being your personal development investment. I recently took this challenge and decided to build a search engine for vegetarians.

V3GGIE – A Vegetarian Search Engine

My goals were simple:

1. Create a simple site that could be copied easily as a proof of concept for other genres. Document the construction for others to explore.
2. Keep it fast with minimal javascript and images
3. Use as much Yahoo infrastructure as possible to minimize development time
4. Most importantly: return information relevant to the niche audience: Vegetarians and Vegans.

I’m not a PHP expert and some of my code is crude. I hope to clean it up and add a number of features to enhance performance and usability. However, the code samples will still be useful to the PHP beginner. More advanced PHP programmers could easily see where they’d take the concepts and improve on them.

Set up the basic structure

V3ggie has a basic workflow, there’s an input and result page. Arguably, this should only be one page which displays the original landing and subsequent results. I have separated them as I hope to create extra content that is appropriate to either the landing or results pages.

Further, there are several search engines built into this site. Each has a specific set of resources to fine tune the results. Currently, these are built with subdirectories (/recipes/, /blogs/, /news/, /local/ ). Each subsection includes index and result pages. This could be changed by utilizing rewrite rules. I’ve kept it simple for now.

Setup the Resources

The BOSS API allows you to create a query param with a list of domains to search through. This is the easiest way to fine tune your results. For instance, the V3ggie recipe search page uses a list of vegetarian cooking sites as well as the vegetarian subdirectories of Epicurious and FoodNetwork.

Technorati is the source for blog buzz. V3ggie searches through blogs tagged with “vegetarian” and/or “vegan”. This helps get the vegetarian viewpoint for any subject.

You have complete freedom to mash the data as much as you like. You could take the search results and mix them with other data, such as the page rank for a result page, the company or product’s appearance on wikipedia, or perhaps data you’ve stored in your own databases. I can imagine creating an internal product search page that cross-references the results with a list of preferred vendors to encourage employees to purchase supplies from the correct vendor.

Setup the Platform

V3ggie is built from PHP. However, Yahoo! has also provided a python platform, the BOSS Mashup Framework, for building sites very quickly. You can combine this with the Google App Engine to create a custom search engine in a short time. Four Hour Search, formally known as Yuil, is such an example. It got its name from the length of time it required to research a domain name, setup Google Apps, and build the final search web site. Personally, I spent more than 4 hours trying to get Google Apps set up and I really didn’t want to learn yet another language (python).

YUI on the frontend

The Yahoo! User Interface library handles the tedious, basic formatting of a page. The CSS libraries allow you to create a wide variety of page grids, standardize the fonts, reset browser inconsistencies and establish a common look and feel.

I started the project by using the CSS Grid Builder. This easy to use tool sets up the page with the desired columns and includes the base css files. I then added the YUI Base CSS file. This takes the plain page and re-establishes the margins and font-styles for a basic site. These two CSS files will remove 75% of the CSS you would normally have to write for a site. Now you can concentrate on what makes your site special.

I also wanted to offer different seach options from a single interface. Once again, I used the YUI TabView package. This combination of CSS and JS allows you to create a semantic set of links and corresponding series of div wrapped objects. YUI Tab View will turn this into the tabbed interface that even has built in ARIA support for screen readers.

I had some trouble getting the tabs to look correct. The documentation does not make it very clear that tab links must have an em within the links to get the proper look and feel. I also downloaded the preferred sprite and used fireworks to change the tab color gradients from blue to green.

Yahoo also provides a design pattern library. This helped me configure my pagination links. Yahoo has spent a lot of time with user testing to make sure things are easy to use.

Create your own search engine

So, what are you wating for? Visit the Yahoo Developer Network and start by signing up and getting a application key. I will write separate posts that describe how to build various components of the page. I’m looking forward to hearing from better PHP programmers on how to improve the code.

Related articles by Zemanta

• Natural Language Image Search with Yahoo Boss and Google App Engine
• Yahoo Boss Is So Open, It Runs on Google’s App Engine

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.

Related articles

• IBM makes web accessibility for blind users a social effort
• Accessible Google Charts
• AxsJAX: Access-Enabling AJAX
• I.B.M. Software Enhances Web Accessibility for the Blind
• Quick follow-up: more YUI Compressor work
• High Performance Ajax Applications
• Reminded of speaking your YAHOO.lang

I’ve come across a problem that should be easy to solve. WordPress allows you to create a category whose posts are displayed differently than other category posts. These “asides” are short posts that appear in the side bar and not in the main body of the blog. This functionality is baked into the latest versions of WordPress and the K2 theme’s admin screen makes it really easy to use.

However, I need to add a second variation of the asides. I want to create a new landing page with three promo spots just below the topnav. This branding section would allow the site to highlight important features, promos, sales, or blog posts. This could be done with asides, however I don’t want to lose the functionality of asides in the blog section.

Asides become Promos

I’ve started by cloning the asides module and functionality and creating a new set of functions (promos). The admin screen now allows you to choose a category that will be defined as a promo. Everything seems to be working until you get to the blog post page. Blog posts labeled as the asides category appear as they should.

However, the promos category and promo posts are not following the aside functionality. I’ve looked at the loop to see where it excludes the asides category and can’t find it. I can’t find the “the_post()” function, which may be the source of the issue. I would assume that the promos module is telling the_post that “promos” category is special and these posts should not be included in the loop, nor in the category list.

help?

Have you worked with the asides functionality in WordPress? Do you have any suggestions? I’ll post a summary when I get the solution figured out.

Resources

Here’s a list of related web pages that include information but haven’t answered my questions.

• WordPress Codex: The Loop
• WP_Query function reference
• 1 post, 3 asides on front page support question
• Adding Asides

Updates

The above link for the loop has some interesting information on multiple loops within one page. I’m going through the examples for some answers. Here’s a snippet of the post:

Loop Examples

Below are two examples of using multiple loops. The key to using multiple loops is that $wp_query can only be called once. In order to get around this it is possible to re-use the query by calling rewind_posts() or by creating a new query object. This is covered in example 1. In example 2, using a variable to store the results of a query is covered. Example 3 documents the use of the update_post_caches(); function to avoid common plugin problems. Finally, ‘multiple loops in action’ brings a bunch of ideas together to document one way of using multiple loops to promote posts of a certain category on your blog’s homepage.
WordPress Codex: The Loop

Updated: the solution

During my initial modification of the files, I missed an important line that tells the loop to honor a new filter. So, if you want to duplicate the asides functionality with a new category, add this new section to wordpress/wp-content/themes/k2/app/includes/info.php

function k2promos_filter($query) {
global $k2sbm_current_module;
$promos = get_option('k2promoscategory');
// Only filter when it's in the homepage
if ( ($promos != 0) and ($query->is_home) and (!$k2sbm_current_module) and

( (function_exists('is_active_module') and is_active_module('promos_module')) or
(function_exists('is_active_widget') and is_active_widget('k2_promos_widget')) ) ) {
$priorcat = $query->get('cat');
if ( !empty($priorcat) ) {
$priorcat .= ',';
}
$query->set('cat', $priorcat . '-' . $promos);
}
return $query;
}
// Filter to remove promos from the loop
add_filter('pre_get_posts', 'k2promos_filter');

In a fit of cleverness, I changed the naming convention on my promos from promos_sidebar_module to promos_module. This threw my code off for a while.

This is the rough draft of my promos.php file that sits in wordpress/wp-content/themes/k2/app/modules/promos.php

There are also some changes in the options.php file and sbm section. Do a search for asides and start replacing with your new function, i.e. promos.

Remove the categories from latest posts and categories modules

The next step in this process was to make sure the promos category (and asides) don’t appear in the category and latest posts modules. These two modules sit inside the /k2/app/modules/ folder. They also use similar logic. We need to create a comma delimited list of categories to exclude from the functions that build the appropriate lists.

This code checks for aside and promos categories. It then creates a comma separator and then combines the categories into a string, i.e. “12,13″

global $k2sbm_current_module;

For the latest posts, we’ll need to create a slightly different string. We need to create a parameter and add a negative sign to each category


$excludes = '-' . $asides . $separator . '-' . $promos;

actually, this is bad logic, I need to only add the – if the category exists. That’s what is great about blogging your code. You realize your mistakes before it is too late.

Finally, we use that excludes variable in the logic to hide the categories, for example (categories.php)

wp_list_categories('title_li=&show_count=1&hierarchical=0&exclude=' . $excludes);


These snippets assume you do not want to include your asides posts into the latest posts and categories modules. you can simplify the code if you only want to exclude the promos.

• WordPress Hacks: Upgrading Versions [via Zemanta]
• WordPress Wednesday News: WordPress 2.5 Due Any Day, Beta 2 Released, Many Plugins Updated, WordCamp Dallas This Weekend, WordCamp UK Suggested, and More [via Zemanta]
• A content suggestion engine for blogging? That could work… [via Zemanta]

Is this asking too much?

Yahoo’s Christian Heilmann has been advocating layered, semantic badging.

Yahoo Music badges and the simple href

Yahoo! Media Player has taken this approach to embedding music. You simply put a link to a music file in your site, insert the music JavaScript and away you go. The Music Badge Twiki also shows how you can extend the functionality with basic HTML elements, such as adding a title attribute or image inside the link.

Here’s an example of the badge in effect. Orca live at the Casbah, 1992 I made a bootleg recording of Orca, a San Diego supergroup circa 1993. I’m simply going to create a basic link to the music file and include an optional image from flickr. The JavaScript will use that information for the player to appear. You’ll see page loads with a little play icon next to the link. There’s also a small player on the side of the browser. Click on either and you’ll see a media player appear in your browser with the music controls.

Here’s the code:

Orca live at the Casbah, 1992


2: Use a Content Delivery Network

Let’s say you have a small site that has a very local audience. Sally down the street doesn’t notice any problems with slow images. But what if your site is more global? Will the Sally equivalent in Europe, Asia, India, or the other side of the country have the same experience? Probably not. This is why large sites use the Akamai servers. They can cache images and files closer to the user.

The #2 rule by the exceptional performance team tells us to use one of these distributed asset servers.

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is chosen.

Some large Internet companies own their own CDN, but it’s cost-effective to use a CDN service provider, such as Akamai Technologies, Mirror Image Internet, or Limelight Networks. For start-up companies and private web sites, the cost of a CDN service can be prohibitive, but as your target audience grows larger and becomes more global, a CDN is necessary to achieve fast response times. At Yahoo!, properties that moved static content off their application web servers to a CDN improved end-user response times by 20% or more. Switching to a CDN is a relatively easy code change that will dramatically improve the speed of your web site.
Best Practices for Speeding Up Your Web Site

Doing this cheaply with Amazon

Amazon’s Web Services give you this functionality for a very low cost. There S3 service costs most people less than $5/month. This gives you easy acces to your private database and storage. You pay by the size of your files and the total traffic.

You can further increase your site’s performance by taking advantage of the hosted Yahoo! YUI CSS and JavaScript libraries.

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.

Related articles

• 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]