Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

  • Be the first to comment

  • Be the first to like this


  1. 1. HACK Mash Up Images from Around the Web #85 H A C K Mash Up Images from Around the Web Hack #85 #85 The Yahoo! Image API provides access to thousands of images across the Web, and developers are recombining these images into new applications that let you play along. In the music world, a mash-up combines two or more existing songs into something entirely new. A mash-up might have a song from the Beatles in the background and vocals from Snoop Dogg in the foreground, while blending in a Sesame Street song at the same time. The Yahoo! Image Search web service offers programmatic access to thousands of images, and some developers are using this service to create their own visual mash-ups— combining disparate images into games, interesting visualizations, or ran- dom works of art. Here are a few interactive examples that will give you a taste of what’s being mashed together with the Yahoo! Image Search API. Yahoo! Buzz Demo The Yahoo! Buzz Demo is an alternative way to read the news. When you browse to, you’ll find an oval-shaped collage made up of over 100 different images, each representing a current top news story. As you move your pointer over each image in the collage, the image pops to the foreground so that you can see it clearly, and a summary of the news story the image represents is displayed in the middle of the page, as shown in Figure 5-18. Clicking an image takes you directly to that image’s original location on the Web, and clicking the center news story takes you to the full story at Yahoo! News. In addition to top stories, you can browse images based on other news categories, or use your own term. Rasmus Lerdorf, a Yahoo! employee, built the Yahoo! Buzz Demo to show what’s possible with the Yahoo! Image Search web service. The demo uses PHP to pull in news stories from Yahoo! News RSS and the Yahoo! News API, images from around the Web via the Yahoo! Image API, and some crafty CSS to pull everything together. While it won’t replace the front page of the paper anytime soon, the Buzz Demo is a fun way to find stories. If you’d like to take a look behind the scenes, you can view the complete source code at Search Collage Generator Siddharth Uppal put together around 100 lines of Perl that grabs up to 50 images for any given query and assembles them into a single collage. He used the existing Yahoo::Search module (available at ~jfriedl/Yahoo-Search-1.4.7/lib/Yahoo/ to assemble Yahoo! Image Chapter 5, Applications | 367
  2. 2. HACK #85 Mash Up Images from Around the Web Figure 5-18. A visual look at top news stories API requests and return the results as Perl-friendly objects. The script then puts each image into a collage on a web page, resizing each image to the same size within HTML <img> tags. You can download a copy of the script at yahoo-image-search-collage-generator.html and run it from the command line like this: perl --query insert query The output is HTML, so you’ll want to send this output to a new file. For example, you can create a collage of portraits from around the Web by call- ing the script like this: perl --query portrait > portrait.html After you run this script, portrait.html will show you a collage similar to the one in Figure 5-19. The script also provides the HTML necessary to share your collage with the world. You can simply cut and paste the HTML in the <textarea> at the bot- tom of the page and paste it into your weblog or web publishing tool to show off your creation. 368 | Chapter 5, Applications
  3. 3. HACK Mash Up Images from Around the Web #85 Figure 5-19. A collage generated with the query “portrait” Yahoo! Memory Game Remember those memory games you played as a kid, where you had to turn over cards of matching pictures? Swedish developer Nisse Bryngfors re- created the game with the Yahoo! Image API and Flash. When you browse to, you’ll find a blank game form titled “Dynamiskt memory spel,” and a “Search images” field in which you can type a search term. Enter a term, click Go!, and the game will be popu- lated with 28 silver tiles. Clicking a silver tile reveals an image that has been gathered via the Yahoo! Images API. Somewhere under another tile is the same image, and it’s your mission to find all of the matches as quickly as possible. Figure 5-20 shows a game in progress using the term fire. If you’d like a shorter game, you can decrease the number of tiles. Some- times, seeing what images the Yahoo! Image API returns is as entertaining as the game itself! Chapter 5, Applications | 369
  4. 4. HACK #85 Mash Up Images from Around the Web Figure 5-20. A Flash memory game using the query “fire” 370 | Chapter 5, Applications