This extension was added to the YUI Gallery by Pradhap Natarajan: Modernizr (gallery-modernizr).

This is a wrapper for Modernizr library that is used to detect support for many HTML5 & CSS3 features on a browser. More documentation here – http://www.modernizr.com/docs/ Please note that the module does not add the Modernizr object to the global namespace. Instead it will be local to the YUI instance.

Modernizr YUI Library

Modernizr was created to make HTML5 development consistent. It gives hooks for JS and CSS to support the advanced features.

Related articles by Zemanta

• YUI 3 (slideshare.net)
• HTML5 Resource: HTML5 Doctor (last-child.com)
• YUI open for all ! (slideshare.net)
• Tech Thursday – Smileys, seeing dogs and cameras, YUI modules, videos and server side JavaScript (developer.yahoo.net)
• Look around you – fun with geolocation and Wikipedia (developer.yahoo.net)

The speakers were

• Ben Galbraith, Co-founder at Ajaxian.com
• Brad Neuberg, Developer at Google
• Chet Haase, Adobe Flex SDK team member
• Michael Carter, Founder at Orbited Project & Official Contributor for W3C HTML5

First off, HTML5 was defined as not just an HTML4+ spec. It also includes all of the advances since HTML4.0. These include:

• CSS3
• webGL
• geolocation
• web workers
• web storage
• web sockets
• canvas, SVG

Canvas vs. SVG

You can roughly think of these as Adobe Flash replacements.

Both canvas and SVG can be used to build dynamic images, charts, animation, and more. Canvas has more adoption at this point and is faster. However, the canvas is built and then keeps no memory of the objects it contains. SVG is more structured and knows what it contains. These sub objects can be further manipulated. SVG has the potential of being much more powerful than canvas in the long run. Microsoft‘s IE9 has demonstrated great potential with SVG.

CSS3 Advancements

There’s been an extended argument about where CSS or JS should be used on a web site. Some developers argue CSS shouldn’t be used for interactivity, such as drop down menus. However, the CSS transformations available in CSS3 are going to throw a major monkey wrench into this argument. They are blurring the boundaries and can do a much better job than javaScript.

Apple and Safari have pushed the development of transformations as they introduced the animation of pages when you switch an iPhone from portrait to landscape mode. This is just the tip of the iceberg. An example last night showed a CSS only version of itunes’ coverflow animation. Check out the CSS3 3D transformations.

Web Workers

Web workers technology should solve an existing problem with javaScript functions that run for extended periods. One example was a JS transformation of an image. It rotated the image and added reflections. However, the image would stop rotating when a user clicked on a button to add/change the functionality. Web Workers allows these functions to operate consistently.

There was another example with a movie of a guy holding a piece of cardboard and rotating it randomly. The user could click on various movies and watch them appear on the cardboard in the movie.

You can participate

One thing mentioned often in the meeting was the open structure for developing the specifications. Anyone can participate by joining the mailing lists, irc (irc.freenode whatwg), and making requests, suggestions, and comments.

They are especially interested in knowing what problems you have that are not solved by the existing specs. What changes would particularly affect you and how would you solve the problem.

For instance, I asked if the phone manufacturers are looking at the HTML5 web forms and using the new input types to intelligently autofill forms. For instance, they know an input is asking for a phone number, should a phone insert your number automatically? What about your other contact information?

Currently, this interaction is not in the spec. This is the kind of comment/suggestion they need to make the final specifications.

Related articles by Zemanta

• Opinion: HTML5 is less than it’s cracked up to be (infoworld.com)
• Microsoft gets behind SVG — finally (asserttrue.blogspot.com)
• SVG in IE9 Roadmap (blogs.msdn.com)
• Google and Adobe cozy up on Flash for Chrome browser (infoworld.com)
• Microsoft embraces HTML5 specification in IE9 (infoworld.com)
• HTML5: Tool of Satan, or Yule of Santa? (24ways.org)
• Going beyond Flash, Adobe shows off Web tech (news.cnet.com)

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

Related articles by Zemanta

• Yahoo! Search BOSS Releases Key Terms
• Return of the Hack, Yahoo! Open Hack Day
• Who’s the Boss, Mobile Impressions and More
• Yahoo’s Search for a Cause to Raise Funds for Breast Cancer Research
• Yahoo! To Be a Default Mobile Search Engine for AT&T; Subscribers
• Sparkling SPARQL: Scripting the Semantic Web
• Yahoo! Releases Badges for Pipes
• hakia Comments on Leveraging Yahoo’s BOSS
• Unlimited Queries with Yahoo! Search BOSS
• BOSS Reaches a Milestone (Yahoo! Search Blog)
• Search the Web Through a Vertical Lens (Yahoo! Search Blog)
• Yahoo! Search BOSS Enables Key Terms
• KallOut Wins BOSS Mashable Challenge, Socialmention Wins Runner Up

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

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


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]

This problem was solved a few years ago by a series of layouts donated to the greater good by wonderful developers. This gave me the ability to ignore layouts and concentrate on semantic, structural markup and using CSS to turn this into a great set of modules on the page. This is the stuff that makes web development fun for me.

Over the years, new layouts came and went and cross-browser layouts developed to a science. It’s now even easier for you to build a web site layout that is predictable, flexible, and lightweight.

The YUI-Grid

Just because I work at Yahoo!, doesn’t mean I immediately jumped onto the YUI-Grid when it was released. I’ve built several sites without it since its launch. A developer becomes comfortable with a solution and change hurts. However, I recently began working on a very simple, small gallery site and gave this tool a try.

First, a bit of an explanation on some of the nomenclature. The YUI has laid down the law on some naming conventions, and while it may seem a bit bloated, the resulting hooks allow a site to easily incorporate the YUI JavaScript and CSS.

Each main container div has three children, class=”hd” for the header, class=”bd” for the body, and class=”ft” for the footer. You can delete the hd or ft if they are not needed, but you need to at least have the body element. The main portions of the page use the same naming conventions, although with id instead of class. The header has id=”hd”, the body container: id=”bd”, and finally the footer has id=”ft”.

YUI flexibility

Nate Koechley, the man behind the grids, has created a series of rules that let you change the width of your grid, the number of columns, position of columns, and how nested columns divide the avialable space by simply changing a few classes on the parent containers.

It’s a very powerful set of controls. Here’s an example of how the classes change the widths of nested divs.

The standard grid-unit interplay always divides space in two, evenly. To create layouts of more than two units (e.g., three), and to create layouts divided unevenly (e.g., 66% and 33% or 75% and 25%), we employ special grid holders. While “yui-g” tells the two children each take up half the space each, “yui-gc” tells the first unit to take up two-thirds of the space, and the other unit to take up one-third of the space. Everything else remains the same: units live within grids, and the first of a set must be indicated.
Nate Koechley – Yahoo! UI Library: Grids CSS

Help?

Now, if you are like me, your head has begun throbbing after reading the YUI Grid CSS page several times, making notes on how it works, and reading it a few more times before figuring out how to start. The package is complex and yet easy to work with once you dive in.

However, it’s easy to skip most of the headaches and begin building your site immediately. Dav Glass, also of the YUI team, created a great Grid Builder that makes it sinfully easy to build your complicated layout. Not only does it generate the HTML for your basic page, it also incorporates the full YUI CSS library.

This means you also get the YUI Base CSS, YUI Reset CSS, as well as the excellent YUI Fonts CSS. All of these are combined into one CSS file that has been akamized for faster downloads. This means your final site CSS can focus solely on the things that make it unique. You’ll be surprised how small your custom files will be when all of these issues have already been dealt with.

Take it one step further

I was prompted to write this post after seeing the latest extension of the Grid CSS from the outside. Christian Heilmann just published a simple javascript, Enhancing YUI grids with equal height columns, that builds on the established nomenclature of the Grid CSS. It’s a demonstration of the power afforded by a standardized class and id naming convention.

Christian’s javascript also utilizes the basic YUI Javascript library to take all of your nested divs and make them the same height. So, with the addition of one more js script, you now have complete control of your grid layout and your nested divs are all the same height.

Here’s how Christian describes the simplicity.

All you need to do is to add YAHOO, YAHOO Dom and YAHOO Event (easiest with the collated yahoo-dom-event package) and the script in the bottom of your document’s body. The script automatically equals all columns in nested grids. If you don’t want all of them to be equal, define only those that need fixing by adding a “columnfix”CSS class.
Christian Heilmann – Enhancing YUI grids with equal height columns

Future flexibility

This powerful package of YUI CSS and standardized nomenclature for establishing the building blocks and the YUI JavaScript library for building interactions will allow developers to spend more time creating the elements that make their site unique and reduce the cross-browser issues caused by individual mistakes. We’ll see more extensions from within and outside the YUI developers as the usage becomes more universal. They YUI libraries are not doing the work for me, they’re just making it a lot more fun and productive.

• The only for loop you will ever need * … * may contain hyperbole to take the mickey out of other blog posts
• Learning to use regular expressions
• Unix Command Summary
• Regular Expressions Cheat Sheet – I Love Jack Daniels