Friday, October 23, 2009

YQL allows you to query the entire web

Leave no RSS, XML document, or web 2.0 api untouched! You literally can grab content from anywhere, turn it into JSON data and display the desired information using my old fiend jQuery.
First off check out the YQL developer console: https://developer.yahoo.com/yql/console/
There you can run test queries and view many community tables using popular api's and file formats doing very useful things. For example, if I want to grab the latest 3 posts from my blog I would just put in:
select * from atom where url='http://graphicallyherdingthemasses.blogspot.com/feeds/posts/default' limit 3

And BAM. Right there in the console you can see the feed. If you select JSON and run the test again and copy the generated url you get this...
https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20atom%20where%20url%3D'http%3A%2F%2Fgraphicallyherdingthemasses.blogspot.com%2Ffeeds%2Fposts%2Fdefault'%20limit%203&format=json&callback=cbfunc
That's great but how can I put that on MY site? Well, first we need to bring in a little jquery to make this JSON url a little easier to work with and read. Here is a little piece of jquery that does just that for you:

$.YQL = function(query, callback) {
    var encodedQuery = encodeURIComponent(query.toLowerCase()),
        url = 'http://query.yahooapis.com/v1/public/yql?q='
            + encodedQuery + '&format=json&callback=?';
    $.getJSON(url, callback);
};

So now all we need to do is grab the data and display it using a little jquery. First we grab the first 3 posts by our YQL call. Once we get the data we are going to find the individual blog posts and grab the title and the link and append it to the called bloggerWidget.

$.YQL("select * from atom where url='http://graphicallyherdingthemasses.blogspot.com/feeds/posts/default' limit 3",function(data){
            var blogPost=data.query.results.entry;
            $.each(blogPost,function(index, blogPost){
                $('#bloggerWidget').append("<li><a href='"+blogPost.link[4].href+"'>"+blogPost.title.content+"</a></li>");
            });    
        });

Here is it in action:


    No ASP, PHP, JSP, proxies, or cross domain errors... You can do this with ANY feed on ANY site. I am currently working on a site that pulls in data from the yahoo weather api, the flickr api, blogger atom feeds, twitter rss 2.0 feeds, and the youtube api.

    Thursday, October 8, 2009

    As the page folds

    Found a great article that talks a problem that I run into all the time. Clients, especially older ones, want everything to fit on one page with no scrolling or to use a print term, "above the fold". Everytime I explain that they have too much information to fit into that space and that it many extremely successful brands have pages with content way below the fold.

    This artcle not only addresses the "popular brands approach:


    It also takes hundreds of hours of eye tracking user testing. Here is a heat map of a site with content mainly above the fold and another with less content above the fold, think large rotating banner image at the top.

    The article also has an example of how to encourage users to explore below the fold. Simple things like don't make a large header that is 100% of the content area's width and "chop off" the page. Also, I would suggest using a subtle vertical gradient to draw the eye naturally downward.

    Another thing to think about to cut down on page scrolling is using columns. Not only does it help with the page height, but it also reduces wasted space and extremely wide copy. Everyone knows 72 characters is the "perfect" width so at 11px font size at 900px width. Two columns is almost perfect for real body text. You can even go to 3 columns on the homepage with short news headlines, event names and announcements.

    Check out the full article "The myth of the page fold":
    http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm