Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com How to Do Everything with Web 2.0 Mashups Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Jesse Feiler New York Chicago San Francisco Lisbon London Madrid Mexico City Milan New Delhi San Juan Seoul Singapore Sydney Toronto Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Copyright © 2008 by The McGraw-Hill Companies All rights reserved Manufactured in the United States of America Except as permitted under the United States Copyright Act of 1976, no part of this publication may be reproduced or distributed in any form or by any means, or stored in a database or retrieval system, without the prior written permission of the publisher 0-07-159568-6 The material in this eBook also appears in the print version of this title: 0-07-149627-0 All trademarks are trademarks of their respective owners Rather than put a trademark symbol after every occurrence of a trademarked name, we use names in an editorial fashion only, and to the benefit of the trademark owner, with no intention of infringement of the trademark Where such designations appear in this book, they have been printed with initial caps McGraw-Hill eBooks are available at special quantity discounts to use as premiums and sales promotions, or for use in corporate training programs For more information, please contact George Hoare, Special Sales, at george_hoare@mcgraw-hill.com or (212) 904-4069 TERMS OF USE This is a copyrighted work and The McGraw-Hill Companies, Inc (“McGraw-Hill”) and its licensors reserve all rights in and to the work Use of this work is subject to these terms Except as permitted under the Copyright Act of 1976 and the right to store and retrieve one copy of the work, you may not decompile, disassemble, reverse engineer, reproduce, modify, create derivative works based upon, transmit, distribute, disseminate, sell, publish or sublicense the work or any part of it without McGraw-Hill’s prior consent You may use the work for your own noncommercial and personal use; any other use of the work is strictly prohibited Your right to use the work may be terminated if you fail to comply with these terms THE WORK IS PROVIDED “AS IS.” McGRAW-HILL AND ITS LICENSORS MAKE NO GUARANTEES OR WARRANTIES AS TO THE ACCURACY, ADEQUACY OR COMPLETENESS OF OR RESULTS TO BE OBTAINED FROM USING THE WORK, INCLUDING ANY INFORMATION THAT CAN BE ACCESSED THROUGH THE WORK VIA HYPERLINK OR OTHERWISE, AND EXPRESSLY DISCLAIM ANY WARRANTY, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE McGraw-Hill and its licensors not warrant or guarantee that the functions contained in the work will meet your requirements or that its operation will be uninterrupted or error free Neither McGraw-Hill nor its licensors shall be liable to you or anyone else for any inaccuracy, error or omission, regardless of cause, in the work or for any damages resulting therefrom McGraw-Hill has no responsibility for the content of any information accessed through the work Under no circumstances shall McGraw-Hill and/or its licensors be liable for any indirect, incidental, special, punitive, consequential or similar damages that result from the use of or inability to use the work, even if any of them has been advised of the possibility of such damages This limitation of liability shall apply to any claim or cause whatsoever whether such claim or cause arises in contract, tort or otherwise DOI: 10.1036/0071496270 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Professional Want to learn more? We hope you enjoy this McGraw-Hill eBook! If you’d like more information about this book, its author, or related books and websites, please click here Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com For Anne Kaufman Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com About the Authors Jesse Feiler has written a number of books about FileMaker, Mac OS X, the Web, and new technologies; his books have been translated into Japanese, Chinese, Polish, German, Spanish, French, and other languages His most recent book is Special Edition Using FileMaker As director of North Country Consulting, he has designed and implemented a variety of solutions for small businesses and nonprofits in fields such as production, marketing, the arts, printing and publishing, food service, and construction He has taught and consulted widely on nonprofit governance, and he is the founder of ChamplainArts.com—a listing of cultural events in states, countries, and languages About the Technical Editor Jim Bumgardner is a senior technical guru at Yahoo! Music, a teacher at Pasadena’s Art Center College of Design, and the creative mind behind CoverPop.com and CrazyDad.com An expert in graphics and music software, Jim makes mashups, software toys, and experimental user interfaces using Flash, JavaScript, PHP, and other tools Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Contents at a Glance Introducing Mashups PART I Welcome to the World of Mashups Understanding the Mashup World 15 Learn Mashup Technologies PART II 10 Know the Web 2.0 Mashup Rules and Design Principles Use XML to Structure Data Use JavaScript to Script the Mashup Page Use PHP to Perform Server-Side Scripting Use MySQL with PHP to Retrieve Mashup Data Use RSS and Atom to Receive Data Automatically Use XMLHttpRequest, XML-RPC, REST, and JSON to Retrieve Data Use XHTML to Structure the Mashup Pages 25 35 47 61 79 97 113 127 Build Your Own Mashups PART III 11 12 13 14 15 16 17 18 19 Implement a Basic Mashup Use the Google Maps API Build Mashups with the Google Maps API Use the Amazon Web Services and Google Search APIs Build a Mashup to Search Amazon and Google at the Same Time Use the Flickr API Build a Mashup to Search Flickr and Google at the Same Time Use the eBay API Map the Locations of eBay Items 143 163 179 205 225 241 255 265 279 Index 291 v Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com This page intentionally left blank For more information about this title, click here Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Contents Acknowledgments Introduction PART I Introducing Mashups CHAPTER Welcome to the World of Mashups xv xvii 11 Understanding the Mashup World 15 Describe a Mashup Use Multisource Mashups Use Presentation Mashups Build Your Own Mashup Decide on Your Mashup’s Objective Identify the Data and the Keys Get Access to the Data Regroup Design the User Interaction Implement the Mashup Implement the Starting Page Make Money with Mashups Achieve Goals with Mashups Improve Productivity with Mashups Know How to Use Mashup Data Legally CHAPTER Sell Things with Mashups Provide Information with Mashups Create Art with Mashups 16 16 17 17 18 18 18 19 19 19 20 20 20 21 21 PART II Learn Mashup Technologies CHAPTER Know the Web 2.0 Mashup Rules and Design Principles 25 Manage Multiple Technologies for Mashups Separate Data from Presentation 26 27 vii viiiSimpo PDFDo Everything SplitWeb 2.0 MashupsVersion - http://www.simpopdf.com How to Merge and with Unregistered Use Scripts Server-Side Scripting Browser-Side Scripting Access Data with APIs Minimize Full-Page Loading Make Your Mashup Visible to Search Engines Use Object-Oriented Programming Techniques Adopt Standards 29 30 30 30 31 32 33 33 Use XML to Structure Data 35 Understand XML Structure and Purpose Learn Basic XML Syntax Create and Use XML Elements Use Attributes to Identify Data Characteristics Avoid Confusion by Using Namespaces CHAPTER 36 38 43 44 45 Use JavaScript to Script the Mashup Page CHAPTER 47 Understand JavaScript Structure Place JavaScript Scripts in Script Elements Use Scripts from an External Source with the src Attribute Scripts Are Interpreted as They Are Encountered on the HTML Page Unless They Are in the Head Element You Can Use Semicolons to End Statements Continue Quoted Text Strings with \ and Concatenation (+) Use Spaces and Comments for Readability JavaScript Is Case-Sensitive Use Local and Global Variables Create and Use Functions Use JavaScript Objects Work with Events Handle Errors Handle JavaScript Environmental Problems CHAPTER 49 49 49 50 50 50 51 51 51 52 54 55 55 57 Use PHP to Perform Server-Side Scripting 61 Understand PHP Structure Use PHP Delimiters Use Comments Terminate PHP Statements Start a PHP Script by Submitting an HTML Form Use PHP Variables and Arrays Use PHP Strings Differentiating Between Single and Double Quotes Using Heredoc Building Concatenated Strings Control PHP Operations 62 64 65 65 65 69 69 69 70 71 72 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Part I Introducing Mashups Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com This page intentionally left blank Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Chapter Welcome to the World of Mashups 4Simpo PDFDo Everything SplitWeb 2.0 MashupsVersion - http://www.simpopdf.com How to Merge and with Unregistered How to ■ Sell Things with Mashups ■ Provide Information with Mashups ■ Create Art with Mashups T his chapter presents a few of the thousands of mashups you can find today on the Web No one knows how many other mashups live behind corporate firewalls, but, chances are, the number is large The mashups in this chapter were chosen to show the variety of the world of mashups Some of them are proofs-of-concept, others are works-in-progress, and others are experiments Others are actual, live products or marketing tools Mashups often provide visualization of information, and, frequently, that visualization is in the form of interactive maps The release of the Google maps API was a major factor in the interest in mashups, in large part because so much information lends itself to mapping As you will see in later chapters of this book, new technologies grouped together as Web 2.0 and AJAX are the building blocks of mashups In conjunction with APIs such as Google mapping, eBay, Yahoo!, Flickr, and others, you will soon be able to build your own mashups like the ones shown in this chapter AJAX (Asynchronous JavaScript and XML) AJAX (Asynchronous JavaScript and XML) is a term first used by Jesse James Garrett in 2005 AJAX is generally considered to include JavaScript, XML, XHTML, DOM, and XMLHttpRequest, all of which are technologies developed in the 1990s, some of them in conjunction with Microsoft’s Remote Scripting project Despite this plethora of technologies, the principle is quite simple: a Web page can retrieve and display data without having to refresh or reload the entire page To this, the page needs to have its own programming logic (usually provided in JavaScript); it needs to be able to send a request for data (usually done with XMLHttpRequest); and it also needs to be able to load, and then unload, data to and from requests (usually done with XML, XHTML, and DOM) The phrase “Web 2.0” was first used in 2004 by O’Reilly Media Web 2.0 refers to the Internet as a platform, as well as the growth of collaborative and sharing services, such as social networking sites, wikis, and the like programmableweb.com is a primary reference to mashups You can find mashups categorized by tags, as well as by technologies, on that site Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com CHAPTER 1: Welcome to the World of Mashups Sell Things with Mashups Mashups can search a database for items that have known addresses Figure 1-1 shows one of the most basic of such searches: a real-estate listing service (http://propertylistingmaps.com/ site) This is a natural for mapping mashups, not only because the items being mapped are not movable (they are houses), but also because the data are already in a searchable database The map has the controls you find in most of the mapping mashups: zoom controls; controls to move the map (including sensitivity to mouse drags); and a choice of a map view, a satellite view, or a hybrid view showing both Markers indicate data points In this case, you can click on a marker to open an info window with text, as is shown for the 927 Roble Av address You can also hover the mouse over another marker (such as 888 Creek Drive) to display a pop-up window The legend in the lower-right of the map identifies two types of markers, based on when data were last updated Mapping APIs let you customize markers to provide yet another level of information on a map FIGURE 1-1 Property Listing Maps 6Simpo PDFDo Everything SplitWeb 2.0 MashupsVersion - http://www.simpopdf.com How to Merge and with Unregistered A mashup is likely to be seen by a self-selected group of people (such as those interested in real estate in a certain area) This makes a mashup a good candidate for a service such as Google Ads Scrolled out of view at the bottom of the window shown in Figure 1-1 are several such ads The real estate business certainly predates mashups, but other opportunities for mashups represent new businesses or new areas for an existing business to pursue TutorLinker.com (http://tutorlinker.com/), shown in Figure 1-2, lets you specify an area and an area of skill to find tutors This mashup uses the Google maps API, and it demonstrates the use of a link in an info window FIGURE 1-2 TutorLinker.com Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com CHAPTER 1: Welcome to the World of Mashups Figure 1-3 shows another aspect of mashups It lets you search an area for various items, but, as you can see from the tabs at the upper left, it will let you see listings from multiple sources such as eBay, Wal-Mart, Amazon, and Craig’s List Mapping, shopping, and comparative mashups are among the most common Whereas the real estate mashup and the tutor mashup were designed to sell goods or services, mashups such as this are used either as a vehicle for advertising to people interested in specific products or as a way of generating referral fees to the mashup creator from services such as Amazon FIGURE 1-3 findnearby.net 8Simpo PDFDo Everything SplitWeb 2.0 MashupsVersion - http://www.simpopdf.com How to Merge and with Unregistered Provide Information with Mashups Mashups are an excellent way of presenting information from one or more sources Figure 1-4 shows a mashup that uses several Web traffic services to analyze up to five domains graphically (http://attentionmeter.com/) The information provided can be dynamic, as in the case of AttentionMeter It also can be information in the public domain that you as a mashup creator organize and present, as shown in 1001 Fishing Holes in Figure 1-5 (http://1001seafoods.com/fishing/fishing-maps.php) FIGURE 1-4 Attentionmeter.com Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com CHAPTER 1: Welcome to the World of Mashups FIGURE 1-5 1001 Fishing Holes The Harley-Davidson mashup, shown in Figure 1-6, takes this much further by providing company-specific information (dealers), as well as information of interest to motorcyclists in a mapping mashup OpenSecrets.org, a Web site run by the Center for Responsive Politics, keeps tabs on political contributions The information provided on its site is designed to help organize that vast amount of publicly disclosed data in a way that makes it available to individual citizens, as shown in 10Simpo PDFDo Everything SplitWeb 2.0 MashupsVersion - http://www.simpopdf.com How to Merge and with Unregistered FIGURE 1-6 Harley-Davidson Great Roads Explorer Figure 1-7 (http://opensecrets.org/travel/index.asp) As you can see, information on specific members of Congress is shown both in a tabular form and on a map All the mashups shown previously in this chapter have started from a user selecting information to be shown Figure 1-8, from Epispider (www.episider.org), uses a different approach The Epispider mashup reads various news feeds and automatically searches them for information about epidemics and natural disasters It then creates maps, such as the one shown in Figure 1-8, that let you see what has happened in various parts of the world Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com CHAPTER 1: Welcome to the World of Mashups 11 FIGURE 1-7 OpenSecrets.org Travel Database Create Art with Mashups The Epispider mashup displays whatever it finds in news feeds without the user controlling the search The mashup designer specifies the news feeds and the rules for displaying information, and things run automatically from there on Artists have been experimenting with such techniques for decades (even longer if you agree with the Wikipedia citation that includes Mozart’s 1757 “Musical Dice Game”) (Jim Bumgardner, the technical editor of this book, provides an earlier example As Bumgardner 12Simpo PDFDo Everything SplitWeb 2.0 MashupsVersion - http://www.simpopdf.com How to Merge and with Unregistered FIGURE 1-8 Epispider.org points out, “An earlier example of algorithmic music composition was extensively documented by the Jesuit Polymath Athanasius Kircher in his 1650 book, Musurgica Universalis Kircher described a box of wooden rods called the ‘Arca Musurgica’ and a related one called the ‘Organum Mathematicum’ (a few existing examples are in European museums) that was used to compose polyphonic church hymns by stitching together a collection of short musical phrases inscribed on the rods Search for Kircher on my blog Krazydad.com for more info—I created some music using his data set [using Perl] a couple of years ago.”) Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com CHAPTER 1: Welcome to the World of Mashups Alexis Lloyd created The Ad Generator (www.theadgenerator.org/) as part of a thesis project at Parsons The New School for Design It sets up rules for generating advertising slogans from randomized components of real slogans The Ad Generator then searches Flickr for images relevant to the new “slogan.” You can see one such “slogan” and its paired image in Figure 1-9 FIGURE 1-9 The Ad Generator 13 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com This page intentionally left blank Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Chapter Understanding the Mashup World ... 86 87 87 88 89 90 90 90 91 95 Use RSS and Atom to Receive Data Automatically CHAPTER 10 97 99 99 10 1 10 2 10 3 10 4 11 0 11 1 11 1 Use XMLHttpRequest, XML-RPC, REST, and JSON to Retrieve Data ... 19 2 19 2 19 3 19 4 19 9 19 9 200 203 Use the Amazon Web Services and Google Search APIs CHAPTER 16 205 206 207 207 209 211 212 213 214 214 214 216 218 Build a Mashup to Search Amazon... Search Feed CHAPTER 11 5 11 5 11 6 11 7 11 8 11 9 12 3 12 4 12 6 Use XHTML to Structure the Mashup Pages 12 7 Understand the Need for XHTML