Saturday, March 17, 2007
Although there's still quite a bit going on with Yahoo Pipes, interest in the gee-whiz user interface seems to be waning around the blogosphere. While the drag-and-drop interface is cool, I think one of the more useful and interesting features of Yahoo Pipes is its ability to export data as JSON data.
Yahoo makes all of its data -- including Pipes feeds data -- available as JSON. JSON -- Javascript Object Notation -- is just data presented as Javascript code. That means you can write Javascript to work directly on the data without any XMLHttpRequest objects to open, get and parse. And because Yahoo provides a nifty callback mechanism, you don't run into the cross domain security issues that plague Ajax developers -- everything runs on the client and Yahoo Pipes enables some truly interesting mashup possibilities that go way beyond the "aggregate 200 feeds and filter on my keywords and pull in some Flickr photos" examples that dominate most blog discussion on Yahoo Pipes.
Code for your site
The most frequently asked question I see on the Pipes discussion boards seems to be "How to I put Pipes feeds on my website?" Here are code examples showing how you can pull data from a Pipes JSON feed and display it automatically on any web page.- Get the JSON feed data. Here's the code to do that. Replace "PipeID" with the feed you're interested in. Be sure to retain "_render=json&_callback=pipeCallback". More about the callback parameter later. Make sure this script is someplace it will be executed when the HTML page loads.
<script type="text/javascript"
If you need a real life example, try this:
src="http://pipes.yahoo.com/pipes/pipe.run?_id=pipeID&_render=json&_callback=pipeCallback">
</script><script type="text/javascript"
src="http://pipes.yahoo.com/pipes/pipe.run?_id=lLJMf7HH2xGlUlFRJjBjOg&_render=json&_callback=pipeCallback">
</script> - Write some CSS. To keep my example simple, I'll use <div> to put things where I want to go. Because this is a callback function, you can't just use document.write because you don't know where the text will actually end up unless you use CSS to place the text. You can define this however you want, but in my sample code I'll use a CSS ID called "leftside" and define a left sidebar.
#leftside {
position:absolute;
left:10px;
width:180px;
border:1px solid black;
font-size:0.8em;
padding:8px;
margin:8px;
} - Create the callback function.The <HEAD> section of the HTML page is as good a place as any to put this code.
<script type="text/javascript">
function pipeCallback(obj)
document.write("<div id=leftside><h3>My Pipes Feed</h3>");
var x;
for (x = 0; x < obj.count ; x++)
{
var buildstring = "<b><a href=" + obj.value.items[x].link + ">" + obj.value.items[x].title + "</a></b>. <span id=desc>" + obj.value.items[x].description + "</span><br />";
document.write(buildstring);
buildstring = null;
}
document.write("</div>");
}
</script> - Some explanation. The function pipeCallback is called by the JSON method that you loaded in Step (1) above. Note that the name of the function matches the _callback parameter you used in calling the first script. obj is the JSON object with one or more members. I'll describe the members in the next step. You can modify this function to change how the link text looks and where the text is placed, but in this example the Title will be a link to the URL of the original article, and the description is also displayed. In real life, you may want to limit the number of items that are actually displayed.
- Arrays and fields. obj.count is the number of members that are in the object. obj.value.items is an array of the members. These members may have different elements depending on how the Pipe was constructed -- you'll need to look at the actual JSON data to see what's specifically available -- but typical RSS feed things will be there, including
- obj.value.items[x].title -- the title of the article.
- obj.value.items[x].description -- the text or summary of the article.
- obj.value.items[x].link -- the URL to the original article.
- obj.value.items[x].pubDate -- the publication date of the article.
- obj.value.items[x].title -- the title of the article.
If you're able to make use of this code, please feel free to post your example in the comments.
Thursday, March 15, 2007
Asphalt 3: Street Rules is rocketing right onto your mobile phone! The third installment of the most famous mobile phone racing game throws you right into the heart of the underground racing world.
Take the wheel of your dream car or bike and make a name for yourself in this circle where respect and money are won through drifts and pileups. Force your opponents off the road and avoid the police roadblocks to attract TV helicopters filming your exploits live! Zip into the world of Asphalt 3: Street Rules and live out the most spectacular mobile racing experience!
Features Asphalt 3: Street Rules
Impose your style at the four corners of the world by triumphing in the streets of San Francisco, St. Petersburg, Honolulu, Tokyo, Rome, Bombay, and Las Vegas. Ride through these circuits with your pedal to the metal and plunge into totally different and specific 3D settings. You'll earn the respect of the underworld and make a fortune by taking on challenges in five racing modes to be unlocked.
Thanks to 3D graphics never before seen on mobile phones, Asphalt 3: Street Rules brings you a speed sensation worthy of the best console racing games.
Back at the garage, Asphalt 3: Street Rules puts you behind the wheel of the hottest racing machines! You'll be able to unlock the 9 cars and 3 motorcycles as your cash grows, ranging from the Mini Cooper S to the Lamborghini Gallardo Spyder. Finally, you'll be able to personalize your beast with tune-up options: modify up to 16 parts of your hotrod to turn it into an unbeatable machine!
