The application program interface (API) is a set of building blocks for programmers.

APIs are made up of routines, protocols, and tools. Most operating environments provide an API so that programmers can write applications consistent with that environment. For example, developing software using the Windows API ensures that your user interface will be consistent with other Windows applications, making it easier for users to learn your new programs.

Use on the Web

Web APIs provide simple ways to interact with websites. Using an API, you can extract public data from sites like del.icio.us, Flickr and Digg to create mashups, reuse data or just about anything else you can imagine.

APIs are also useful for extracting your own private data from a web service so that you can back it up elsewhere or display it on another site.

When talking about APIs you’ll here the following terms quite a bit.

Common Web API Related Terms

• Web service/API — These terms are largely interchangeable and simple refer to the ways you can interact with the data on your favorite websites.

• Method — A method is just one aspect of an API; you might also see methods refered to a functions. For instance, if you’re interacting with Flickr, you might want to get your public photos. To do so you would use the get_user_photos method.

• Response — The information returned by the API method that you’ve called.

• REST — Short for Representational State Transfer. REST treats data as a web document that lives at a specific URL. REST APIs use standard HTTP requests such as GET, PUT, HEAD, DELETE and POST to interact with data.

• XML-RPC — This older API scheme formats method calls and responses as XML documents which are sent over HTTP.

• SOAP — Simple Object Access Protocol. A W3C standard for passing messages across the network. SOAP is the successor to XML-RPC. It’s complexity has led many to disparage SOAP and with more APIs leaning toward REST, SOAP’s future is uncertain.

• Ajax — Asynchronous JavaScript and XML. Technically it has nothing to do with APIs, however many sites using APIs send their queries out using Ajax which is partially responsible for the popularity of JSON.

• JSON — JavaScript Object Notation. JSON’s main advantage is that it is easy to convert from JSON to nearly any other programming language. JSON uses key-value pairs and arrays, something common to PHP, Python, Perl, Ruby and most other languages. The portability of JSON has made it an increasingly popular choice for sites developing APIs.

Popular Web APIs

• Google Maps
• Yahoo Maps
• Flickr
• YouTube
• del.icio.us
• Ma.gnolia
• Twitter
• Yelp
• OpenID
• Amazon S3
• AtomAPI
• MediaWiki API
• vzaar API
  ]]> http://www.webmonkey.com/2010/02/api/feed/ 0 http://www.webmonkey.com/2010/02/platform/ http://www.webmonkey.com/2010/02/platform/#comments Mon, 15 Feb 2010 20:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=280

  
  Software developers need to know which platform their software will be running on. A platform can be an Intel processor running Windows, a Macintosh running System 8, or any combination of hardware and software that works together. Platforms are important for web designers to understand, because they need to make sure their pages will work on more than one platform. Different browsers display web pages differently on various platforms. Since the internet itself is a cross-platform system, designers need to test web pages on different combinations of machines and browsers to ensure the widest possible audience will be able to view their sites.

  ]]> http://www.webmonkey.com/2010/02/platform/feed/ 0 http://www.webmonkey.com/2010/02/yahoo_maps_api/ http://www.webmonkey.com/2010/02/yahoo_maps_api/#comments Tue, 16 Feb 2010 01:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=445

  This is the basic structure of a data call to Yahoo Maps’ API. This will draw a 500px by 300px map centered on Wired’s San Francisco offices, complete with zoom and pan controls. When the user clicks on the location marker, a pop-up box will appear with some text inside.

  All of these attributes can be changed by modifying the code below. You’ll need to use your own API key.

  
  

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  
  	<head>
  
  
  
  		<title>My Yahoo Map</title>
  
  		<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=YOUR_API_KEY"></script>
  
  		<style>
  
  		div#ymap {
  
  			width: 500px;
  
  			height: 300px;
  
  		}
  
  		</style>
  
  
  
  		<script type="text/javascript">
  
  		function initialize_ymap()
  
  		{
  
  			// Create a map object
  
  			var map = new YMap(document.getElementById('ymap'));
  
  			// Create latitude/longitude point
  
  			var yPoint = new YGeoPoint(37.780764,-122.395592);
  
  
  
  			// Add map type control
  
  			map.addTypeControl();
  
  			// Default map to satellite (YAHOO_MAP_SAT) -- other opts: YAHOO_MAP_HYB, YAHOO_MAP_REG
  
  			map.setMapType(YAHOO_MAP_SAT);
  
  
  
  			// Add zoom control
  
  			map.addZoomLong();
  
  			// Add the pan control
  
  			map.addPanControl();
  
  
  
  			// Display the map centered on a geocoded location
  
  			map.drawZoomAndCenter(yPoint, 6);
  
  
  
  			// Create a new marker for an address
  
  			var myMarker = new YMarker(yPoint);
  
  			// Create some content to go inside the SmartWindow
  
  			var myMarkerContent = "<h2><strong>Wired HQ!</strong></h2><p>Home of Monkeys</p>";
  
  			// When the marker is clicked, show the SmartWindow
  
  			YEvent.Capture(myMarker, EventsList.MouseClick,
  
  				function() {
  
  					myMarker.openSmartWindow(myMarkerContent);
  
  				});
  
  
  
  			// Add a label to the marker
  
  			myMarker.addAutoExpand("Click for more!");
  
  
  
  			// Put the marker on the map
  
  			map.addOverlay(myMarker);
  
  
  
  		}
  
  		</script>
  
  	</head>
  
  
  
  	<body onload="initialize_ymap()">
  
  		<h1>My Yahoo! Map</h1>
  
  		<div id="ymap"></div>
  
  	</body>
  
  </html>
  
  
  
  
  
  

  ]]> http://www.webmonkey.com/2010/02/yahoo_maps_api/feed/ 2 http://www.webmonkey.com/2010/02/get_started_with_the_yahoo_maps_api/ http://www.webmonkey.com/2010/02/get_started_with_the_yahoo_maps_api/#comments Tue, 16 Feb 2010 01:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=821

  Yahoo’s Maps API may not be as popular as Google’s mashup mainstay, but it has many of the same features. In some ways, it’s even easier to use than Google’s Maps API, so beginners getting started with API interaction might prefer Yahoo’s implementation.

  To get started working with Yahoo maps, we’ll simply create a map we can display on a web page, and then add a marker to denote a particular location.

  
  

  Contents What you’ll need How to Proceed Step 1: Get started Step 2: Adding in the Map Step 3: Adding Markers Where to Go From Here Further Reading

  What you’ll need

  • Knowledge of JavaScript, CSS and HTML
  • A Yahoo account
  • A Yahoo Application ID. Yahoo will ask for some information from you, but the good news is you get an ID right away.

  
  

  How to Proceed

  Step 1: Get started

  Before using the API, you’ll need a Yahoo account and an Application ID. Once you have your ID, create a file containing the following HTML:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  
  	<head>
  
  		<title>My Yahoo Map</title>
  
  		<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=appidhere"></script>
  
  	</head>
  
  	<body>
  
  		<h1>My Yahoo Map</h1>
  
  		<div id="ymap"></div>
  
  	</body>
  
  </html>
  
  

  This code is enough to load the API, but we don’t have a map quite yet.

  
  

  Step 2: Adding in the Map

  To tell Yahoo how and where to add a map, we need to add some JavaScript between the head tags near the top of our HTML file. Try this function, initialize_ymap:

  		<script type="text/javascript">
  
  		function initialize_ymap()
  
  		{
  
  			// Create a map object
  
  			var map = new YMap(document.getElementById('ymap'));
  
  			// Display the map centered on a geocoded location
  
  			map.drawZoomAndCenter("San Francisco", 6);
  
  		}
  
  		</script>
  

  
  Here, we tell Yahoo to use the element with the id “ymap” as our map. In the HTML code we created in step one, we included an empty div with the “ymap” id. In the second part of the script, we tell the map to center on San Francisco and zoom in.

  Finally, we need to call the initialize_ymap function. To do this, add an onload attribute to the body tag of your HTML document, like so:

  	<body onload="initialize_ymap()">
  
  

  Reload the HTML file and you should see San Francisco. Yeah?

  Now would also be a fine time to change the shape of your map if you’d like. To do this, you just need to add a few style declarations for div#ymap in your CSS file, or add this code between your head tags:

  		<style>
  
  		div#ymap {
  
  			width: 500px;
  
  			height: 300px;
  
  		}
  
  		</style>
  

  Reload and now you should see San Francisco in widescreen. Fancy!

  
  

  Step 3: Adding Markers

  The thing that makes using these maps better than using a plain old static image is the added spark you get from interactivity. To that end, let’s take this map up a notch by adding a clickable marker — one of those little flags that denotes a specific point on the map. Yahoo also lets you include information about the location inside an element called the SmartWindow. Your visitors will see the Ajax-powered SmartWindow pop up when they click on your marker.

  Placing a marker on your map will require adding some more JavaScript code to the initialize_ymap function. Add this bit after the drawZoomAndCenter line:

  		// Create a new marker for an address
  
  		var myMarker = new YMarker("520 3rd St, San Francisco, CA");
  
  		// Create some content to go inside the SmartWindow
  
  		var myMarkerContent = "<h2><strong>Wired.com</strong></h2><p>Home of Monkeys</p>";
  
  		// When the marker is clicked, show the SmartWindow
  
  		YEvent.Capture(myMarker, EventsList.MouseClick,
  
  			function() {
  
  				myMarker.openSmartWindow(myMarkerContent);
  
  			});
  
  		// Put the marker on the map
  
  		map.addOverlay(myMarker);
  

  
  Reload your HTML file and now a little speech bubble icon should now be hovering above I-80 on the east side of San Francisco. Click it, and you’ll see the message inside a SmartWindow. You can even include HTML markup inside your SmartWindow.

  Now you’ve made huge strides toward being a Yahoo Maps API expert!

  
  

  Where to Go From Here

  There are many ways to improve your Yahoo Map. So far we have a very basic map, but here are a few more things you can do to make it a little sexier, complete with code.

  Add a short message to your marker when users hover their mouse over the icon. Add this code after the new YMarker line:

  		// Add a label to the marker
  
  		myMarker.addAutoExpand("Click for more!");
  
  

  
  Make your map zoomable and navigatable by adding some pre-made controls from Yahoo’s API. Add this after the new YMap line:

  		// Add zoom control
  
  		map.addZoomLong();
  
  		// Add the pan control
  
  		map.addPanControl();
  
  

  Set your map to show satellite images, and provide a way for users to change the map type. Add this after the new YMap line:

  		// Add map type control
  
  		map.addTypeControl();
  
  		// Default map to satellite (YAHOO_MAP_SAT) -- other opts: YAHOO_MAP_HYB, YAHOO_MAP_REG
  
  		map.setMapType(YAHOO_MAP_SAT);
  
  

  Yahoo’s API is pretty neat in that it lets you add maps and markers with only the name or address of the place. Without extra effort, Google uses latitude and longitude points, two numbers that refer to a geocode location for a spot on a map.

  Yahoo can use these numbers, too. The upside of using points is that, especially with many markers, your maps will load faster.

  To change our map to use points, add this line after the new YMap line:

  		// Create latitude/longitude point
  
  		var yPoint = new YGeoPoint(37.780764,-122.395592);
  
  

  Then change the new YMarker and drawZoomAndCenter lines to reference the yPoint variable instead of the city or address:

  		// Display the map centered on a geocoded location
  
  		map.drawZoomAndCenter(yPoint, 6);
  
  		// Create a new marker for an address
  
  		var myMarker = new YMarker(yPoint);
  
  

  Create custom image markers, draw lines on a map, or overlay local search results — it’s all outlined in Yahoo’s documentation.

  Further Reading

  You can grab all of the code used in this article from Webmonkey’s Code Library: Yahoo Maps API

  ]]> http://www.webmonkey.com/2010/02/get_started_with_the_yahoo_maps_api/feed/ 2