created by http://livecoding.io

README.md

View this code at http://livecoding.io/4084256

options.json

{
    "libraries": [],
    "mode": "css",
    "layout": "sketchpad mode"
}

water.css

/*
 * Copyright (c) 2001, 2003, 2010 The FreeBSD Documentation Project
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
 * ARE DISCLAIMED.  IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE
 * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
 * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
 * OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
 * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
 * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
 * OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
 * SUCH DAMAGE.
 *
 * $FreeBSD: head/share/misc/docbook.css 39740 2012-10-12 12:10:41Z eadler $
 */

body address {
	line-height: 1.3;
	margin: .6em 0;
}

body blockquote {
	margin-top: .75em;
	line-height: 1.3;
	margin-bottom: .75em;
}

html body {
	margin: 1em 8% 1em 10%;
	line-height: 1.2;
}

.legalnotice {
	font-size: small;
	font-variant: small-caps;
}

body div {
	margin: 0;
}

dl {
	margin: .8em 0;
	line-height: 1.2;
}

div.calloutlist dt {
	float: left;
	width: 1em;
}

div.calloutlist dd {
	clear: right;
	margin-bottom: 1ex;
}

body form {
	margin: .6em 0;
}

h1, h2, h3, h4, h5, h6,
div.example p b,
.question,
div.table p b,
div.procedure p b {
	color: #990000;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
	line-height: 1.3;
	margin-left: 0;
}

body h1, body h2 {
	margin: .8em 0 0 -4%;
}

body h3, body h4 {
	margin: .8em 0 0 -3%;
}

body h5 {
	margin: .8em 0 0 -2%;
}

body h6 {
	margin: .8em 0 0 -1%;
}

body hr {
	margin: .6em;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #cecece;
}

body img.navheader {
	margin: 0 0 0 -4%;
}

ol {
	margin: 0 0 0 5%;
	line-height: 1.2;
}

body pre {
	margin: .75em 0;
	line-height: 1.0;
	font-family: monospace;
}

body td, body th {
	line-height: 1.2;
}

ul, body dir, body menu {
	margin: 0 0 0 5%;
	line-height: 1.2;
}

html {
	margin: 0;
	padding: 0;
}

body p b.application {
	color: #000000;
}

.filename {
	color: #007a00;
}

svnref {
	color: #007a00;
}

.guimenu, .guimenuitem, .guisubmenu,
.guilabel, .interface,
.shortcut, .shortcut .keycap {
	font-weight: bold;
}

.guibutton {
	background-color: #CFCFCF;
	padding: 2px;
}

.accel {
	background-color: #F0F0F0;
	text-decoration: underline;
}

.screen {
	padding: 1ex;
}

.programlisting {
	padding: 1ex;
	background-color: #eee;
	border: 1px solid #ccc;
	line-height: 1.1;
}

@media screen {  /* hide from IE3 */
	a[href]:hover { background: #ffa }
}

.informaltable, .table th {
	padding-left: 02.em;
	text-align: left;
}

blockquote, .example, .programlisting {
	border-radius: 6px;
}

blockquote {
	padding: 0 2ex;
}

blockquote.note {
	color: #222;
	background: #eee;
	border: 1px solid #ccc;
	width: 85%;
}

blockquote.tip {
	color: #004F00;
	background: #d8ecd6;
	border: 1px solid green;
	width: 85%;
}

blockquote.important {
	font-style:italic;
	border: 1px solid #a00;
	border-left: 12px solid #c00;
}

blockquote.warning {
	color: #9F1313;
	background: #f8e8e8;
	border: 1px solid #e59595;
	width: 85%;
}

blockquote.caution {
	color: #3E3535;
	background: #FFC;
	border: 1px solid #e59595;
	width: 85%;
}

.example {
	background: #fefde6;
	border: 1px solid #f1bb16;
	margin: 1em 0;
	padding: 0.2em 2em;
	width: 90%;
}

.informaltable table.calstable tr td {
        padding-left: 1em;
        padding-right: 1em;
}

water.html

<div class="section" title="Introduction"><div class="titlepage"><div><div><h2 class="title" style="clear: both" id="d0e148">Introduction</h2></div></div></div><p>
            <span class="bold"><strong>H</strong></span>ow many times have you seen a web site and said, “This would be exactly what I wanted—if only . . .” If only you could combine the statistics here with data from your company’s earnings projections. If only you could take the addresses for those restaurants and plot them on one map. How often have you entered the date of a concert into your calendar with a single click instead of retyping? How often do you wish that you could make all the different parts of your digital world—your e-mail, your word processor documents, your photos, your search results, your maps, your presentations—work together more seamlessly? After all, it’s all digital and malleable information—shouldn’t it all just fit together?</p><p>In fact, below the surface, all the data, web sites, and applications you use could fit together. This book teaches you how to forge those latent connections—to make the Web your own—by remixing information to create your own mashups. A <span class="emphasis"><em>mashup</em></span>, in the words of the Wikipedia, is a web site or web application “that seamlessly combines content from more than one source into an integrated experience.” 
            <sup>[<a id="d0e163" href="#ftn.d0e163" class="footnote">1</a>]</sup>Learning how to draw content from the Web together into new integrated interfaces and applications, whether for yourself or for other others, is the central concern of this book.</p><p>Let’s look at a few examples to see how people are remixing data and services to make something new and useful:</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem"><p>Housingmaps.com brings together Google Maps and the housing and rental listings from Craigslist.com. Note that it was invented by neither Google nor Craigslist but by an individual programmer, Paul Radamacher. Housingmaps.com adds to the functionality of Craigslist, which will show you on a map where a specific listing is located but not all the rentals or houses in an area. <sup>[<a id="d0e178" href="#ftn.d0e178" class="footnote">2</a>]</sup></p></li><li class="listitem"><p>Google Maps in Flickr (GMiF) brings together Flickr pictures, Google Maps, Google Earth, and the Firefox browser via Greasemonkey. <sup>[<a id="d0e185" href="#ftn.d0e185" class="footnote">3</a>]</sup></p></li><li class="listitem"><p>The Library Lookup bookmark is a JavaScript bookmarklet that connects Amazon.com and your local library catalog. <sup>[<a id="d0e192" href="#ftn.d0e192" class="footnote">4</a>]</sup></p></li></ul></div><p>To create your own mashups and customize the Web, you will look at these examples in greater detail, in addition to many other examples large and small, in this book. You can solve countless specific problems by remixing information. Here are some examples of techniques you will learn in this book:</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem"><p>Taking a book you found on Amazon.com and instantly locating it in your local library</p></li><li class="listitem"><p>Synthesizing a single news feed from many news sources through Yahoo! Pipes</p></li><li class="listitem"><p>Posting Flickr photos to blogs with a click of a button</p></li><li class="listitem"><p>Displaying your photos in Google Maps and Google Earth</p></li><li class="listitem"><p>Using special extensions to Firefox to learn how to program Google Maps</p></li><li class="listitem"><p>Inserting extra information into web pages with Greasemonkey</p></li><li class="listitem"><p>Plotting stories from your favorite news source (such as the <span class="emphasis"><em>New York Times</em></span>) on a map</p></li><li class="listitem"><p>Making your own web site remixable so that others can create mashups from your content</p></li><li class="listitem"><p>Creating Google calendars from your event calendars from the Web</p></li><li class="listitem"><p>Storing and retrieving your files from online storage (S3)</p></li><li class="listitem"><p>Creating an online spreadsheet from your Amazon.com wishlist</p></li><li class="listitem"><p>Recognizing and manipulating data embedded in web pages</p></li><li class="listitem"><p>Adding an event listed on the Web to your calendar and e-mailing it to other people with one mouse click</p></li><li class="listitem"><p>Building web search functionality into your own web applications</p></li><li class="listitem"><p>Republishing word documents that are custom-formatted for your web site</p></li></ul></div><p>Mashups are certainly hot right now, which is interesting because it makes you part of a shared undertaking, a movement. Mashups are fun and often educational. There’s delight in seeing familiar things brought together to create something new that is greater than the sum of its parts. Some mashups don’t necessarily ask to be taken that seriously. And yet mashups are also powerful—you can get a lot of functionality without a lot of effort. They might not be built to last forever, but you often can get what you need from them without having to invest more effort than you want to in the first place. </p><div class="section" title="The Web 2.0 Movement"><div class="titlepage"><div><div><h3 class="title" id="d0e252">The Web 2.0 Movement</h3></div></div></div><p>The Web 2.0 bandwagon is an important reason why mashups are popular now. Mashups have been identified explicitly (under the phrases “remixable data source” and “the right to remix”) by Tim O’Reilly in “What is Web 2.0?” <sup>[<a id="d0e257" href="#ftn.d0e257" class="footnote">5</a>]</sup> Added to this, we have the development of what might be accurately thought of as “Web 2.0 technologies/mind-sets” to remix/reuse data, web services, and micro-applications to create hybrid applications. Recent developments bring us closer to enabling users to recombine digital content and services:</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem"><p>Increasing availability of XML data sources and data formats in business, personal, and consumer applications (including office suites)</p></li><li class="listitem"><p>Wide deployment of XML web services</p></li><li class="listitem"><p>Widespread current interest in data remixing or mashups</p></li><li class="listitem"><p>Ajax and the availability of JavaScript-based widgets and micro-applications</p></li><li class="listitem"><p>Evolution of web browsers to enable greater extensibility (for example, Firefox extensions and Greasemonkey scripts)</p></li><li class="listitem"><p>Explosive growth in “user-generated content” or “lead-user innovation”</p></li><li class="listitem"><p>Wider conceptualization of the Internet as a platform (“Web 2.0”)</p></li><li class="listitem"><p>Increased broadband access</p></li></ul></div><p>These developments have transformed creating mashups from being technically challenging to nearly mainstream. It is not that difficult to get going, but you need to know a bit about a fair number of things, and you need to be playful and somewhat adventurous.</p><p>Will mashups remain cutting-edge forever? Undoubtedly, no, but not because they will prove to be an irrelevant fad but because the functionality we see in mashups will eventually be subsumed into the ordinary “what-we-expect-and-think-has-always-been-there” functionality of our electronic society.</p><p>Moreover, mashups reflect deeper trends, even the deepest trends of human desire. As the quality, quantity, and diversity of information grow, users long for tools to access and manage this bewildering array of information. Many users will ultimately be satisfied by nothing less than an information environment that gives them seamless access to any digital content source, handles any content type, and applies any software service to this content. Consider, for example, what a collection of bloggers expressed as their desires for next-generation blogging tools: <sup>[<a id="d0e295" href="#ftn.d0e295" class="footnote">6</a>]</sup></p><div class="blockquote"><blockquote class="blockquote"><p>Bloggers want tools that are utterly simple and allow them to blog everything that they can think, in any format, from any tool, from anywhere. Text is just the beginning: Bloggers want to branch out to multiple media types including rich and intelligent use of audio, photos, and video. With input, having a dialog box is also seen as just a starting place for some bloggers: everything from a visual tool to easy capture of things a blogger sees, hears, or reads point to desirable future user interfaces for new generations of blogging tools.</p></blockquote></div><p>Mashups are starting to forge this sought-after access and integration of data and tools—not only in the context of blogging but also to any point of interaction between users and content. </p></div><div class="section" title="Overall Flow of the Book"><div class="titlepage"><div><div><h3 class="title" id="d0e304">Overall Flow of the Book</h3></div></div></div><p>A central question of this book is, how can both nontechnical end users and developers recombine data and Internet services to create something new for their own use for and for others? Although this book focuses primarily on XML, web services, and the wide variety of web applications, I’ll also cover the role played by desktop applications and operating systems.</p><div class="section" title="The Book’s Structure"><div class="titlepage"><div><div><h4 class="title" id="d0e309">The Book’s Structure</h4></div></div></div><p>The following is a breakdown of the parts and chapters in this book:</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem"><p>
                            <span class="bold"><strong>Part 1</strong></span>, “Remixing Information Without Programming,” introduces mashups without demanding programming skills from you and teaches skills for deconstructing applications for their remix potential.</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem"><p>Chapter 1, “Learning from Specific Mashups,” analyzes in detail a selection of mashups/remixes (specifically, Housingmaps.com, Google Maps in Flickr, and the LibraryLookup bookmarklet) to get you oriented to mashups in general and to some general themes we will continually revisit throughout the book.</p></li><li class="listitem"><p>Chapter 2, “Uncovering the Mashup Potential of Web Sites,” analyzes Flickr (as our primary extended example) for what makes it the remix platform <span class="emphasis"><em>par excellence</em></span> for learning how to remix a specific application and exploit features that make it so remixable. We compare and contrast Flickr with other remixable platforms such as del.icio.us, Google Maps, and Amazon.com.</p></li><li class="listitem"><p>Chapter 3, “Understanding Tagging and Folksonomies,” covers tagging. Tagging, which allows users to attach words to pictures, and websites—almost anything on the Web—is the glue that holds many things together, both within and across websites. This chapter illustrates how tags are used in Flickr, del.icio.us, and Technorati and discusses how to create interesting tag-centric mashups, how people are “hacking” the tagging system to create<span class="emphasis"><em>
                                    </em></span>ad hoc<span class="emphasis"><em>
                                    </em></span>databases, and how tags relate to other classification systems.</p></li><li class="listitem"><p>Chapter 4, “Working with Feeds, RSS, and Atom,” presents RSS and Atom, perhaps the most widespread dialects of XML, as both a potent technology for remixing in its own right and also as a specific way to learn about XML more generally. Not to be missed are the sections on the various RSS/Atom-related formats and their significance for information remix. The chapter includes a tutorial on using Yahoo! Pipes to filter and synthesize feeds.</p></li><li class="listitem"><p>Chapter 5, “Integrating with Blogs,” uses Flickr’s integration with weblogs as ?a jumping-off point for an exploration of weblogs and wikis and their programmability. Integration with blogging is an important topic since blogs represent a type of remixing in a narrative, as opposed to data-oriented remixing via tags and the straight RSS so far discussed. A brief discussion of integration with wikis concludes the chapter. </p></li></ul></div></li><li class="listitem"><p>
                            <span class="bold"><strong>Part 2</strong></span>, “Remixing a Single Web Application Using Its API,” concentrates on teaching the broad classes of web-based APIs by studying exemplars of each class.</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem"><p>Chapter 6, “Learning Web Services APIs Through Flickr,” studies Flickr in detail. In addition to be an exemplar for a range of nonprogramming remixing techniques in Part 1, Flickr is also an excellent playground for learning XML web services. This chapter will show you how to use the Flickr API, looking first at how to make a simple call to the API, next looking at how to make sense of the entire variety of calls available, and then generalizing to handle authentication.</p></li><li class="listitem"><p>Chapter 7, “Exploring Other Web APIs,” explains commonalities and contrasts among various API providers, specifically those between Flickr and other systems, and surveys the types of services available and how to think about the sheer range of APIs. You will learn how to call REST, XML-RPC, and SOAP-based services. This chapter looks at sites, such as Programmableweb.com, that document these various APIs and the challenges faced in doing so.</p></li><li class="listitem"><p>Chapter 8, “Learning Ajax/JavaScript Widgets and Their APIs,” describes the other large class of web application remixability: those of JavaScript-based widgets, many of which are Ajax applications. This chapter contrasts old-style web applications with Ajax approaches through specific examples in Flickr and other applications and introduces the Yahoo! UI Library, a specific JavaScript widget library to demonstrate how to program widgets. You will also learn how to use the Firebug Firefox extension and the JavaScript Shell to learn about JavaScript. The chapter concludes with an introduction to using Greasemonkey. </p></li></ul></div></li><li class="listitem"><p>
                            <span class="bold"><strong>Part 3</strong></span>, “Making Mashups,” is the heart of the book; it’s a discussion of how to use what you learned in Parts 1 and 2 to create mashups.</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem"><p>Chapter 9, “Moving from APIs and Remixable Elements to Mashups,” analyzes mashups and their relationship to APIs through studying a series of specific problems for which mashups can provide useful solutions. The chapter looks at how you can track books, real estate, airfare, and current events by combining various APIs. You will learn how to use Programmableweb.com to analyze these problems.</p></li><li class="listitem"><p>Chapter 10, “Creating Mashups of Several Services,” teaches you how to write mashups by providing a detailed example that you’ll build from the ground up: a mashup of geotagged Flickr photos and Google Maps using first the Google Maps API and then the Google Mapplets API.</p></li><li class="listitem"><p>Chapter 11, “Using Tools to Create Mashups,” discusses tools that have been developed to make creating mashups easier than by using traditional web programming techniques. This chapter walks you through using one of these tools—the Google Mashup Editor—and briefly surveys other tools.</p></li><li class="listitem"><p>Chapter 12, “Making Your Web Site Mashable,” shifts the focus of the book briefly from the consumption to the production of data and APIs. This chapter is a guide to content producers who want to make their web sites friendly to mashups. That is, this chapter answers the question, how would you as a content producer make your digital content most effectively remixable and mashable to users and developers? </p></li></ul></div></li><li class="listitem"><p>
                            <span class="bold"><strong>Part 4</strong></span>, “Exploring Other Mashup Topics,” covers how to remix and integrate specific classes of applications, using the core conceptual framework of Parts 1 to 3 to guide the discussion.</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem"><p>Chapter 13, “Remixing Online Maps and 3D Digital Globes,” covers popular online maps and virtual globes, offering examples of map-based mashups. You’ll learn about making maps without programming and data exchange formats (GeoRSS and KML), and then you’ll turn to the various APIs: Google Maps, Yahoo! Maps, and Microsoft Maps. I’ll also cover geocoding American and non-American addresses. The chapter closes with a discussion of Google Earth, its relationship to KML, and how to display Flickr photos via KML.</p></li><li class="listitem"><p>Chapter 14, “Exploring Social Bookmarking and Bibliographic Systems,” covers how social bookmarking responds to a fundamental challenge—the job of keeping found things found on the Web, which, at a basic level, is done through URLs, but you’ll learn about other digital content such as images and data sets. Social bookmarking is interesting not only for the extensibility/remixability being built into these systems but also for the insight it offers into other systems. This chapter walks you through a select set of social bookmarking systems and their APIs, as well as discusses interoperability challenges among these systems. The chapter shows how to create a mashup of Flickr and del.icio.us.</p></li><li class="listitem"><p>Chapter 15, “Accessing Online Calendars and Event Aggregators,” shows what data you can get in and out of calendars without programming (using iCalendar and XML feeds), how to program individual calendars (using Google Calendar and 30boxes), and how to program individual event aggregator APIs (using Upcoming.yahoo.com and Eventful.com). The chapter concludes with a mashup of a public events calendar with Google Calendar.</p></li><li class="listitem"><p>Chapter 16, “Using Online Storage Services,” surveys the potentially important and growing area of online storage solutions and shows the basics of using Amazon S3.</p></li><li class="listitem"><p>Chapter 17, “Mashing Up Desktop and Web-Based Office Suites,” shows how to do some simple parsing in ODF and OpenXML, demonstrates how to create a simple document in both ODF and OpenXML, explains some simple scripting of Microsoft Office and OO.o, and concludes with a mashup of Google Spreadsheets and Amazon.com web services.</p></li><li class="listitem"><p>Chapter 18, “Using Microformats and RDFa As Embeddable Data Formats,” studies two answers to the problem of how to embed information in web pages that is easy to understand by both humans and computer programs: microformats and RDFa. You will learn how to use and program the Operator Firefox extension to recognize and manipulate microformats.</p></li><li class="listitem"><p>Chapter 19, “Integrating Search,” shows how to use the Google Ajax Search API, Yahoo! Search APIs, and Microsoft Live.com search; the chapter also introduces OpenSearch and the Google Desktop HTTP/XML gateway. </p></li></ul></div></li></ul></div></div></div><div class="section" title="Intended Audience"><div class="titlepage"><div><div><h3 class="title" id="d0e411">Intended Audience</h3></div></div></div><p>This book is accessible to a wide range of readers, including those who are curious about Web 2.0 applications and those who want to know more about the technical underpinnings of it. The technical perquisites are a good understanding of HTML, basic CSS, and basic JavaScript. References to appropriate background materials will be provided. In this book, most of the server-side code is presented in PHP. Some code is in Python.</p><p>At the same time, experienced developers will also be able to learn much from the book. Although there will be a breadth of coverage, I will strive to state deep, essential facts about the technologies in question (with respect to their applicability to remix)—aspects that might not be obvious at first glance.</p><p>Information remixing can easily come across as a confusing grab bag of techniques. Beginners have a hard time understanding the significance of XML, web services, Ajax, COM, and metadata for remixing data. It is not that difficult to get going, but you need to know a bit about a fair number of different topics, and you need to be playful and somewhat adventurous. Usually these topics are found scattered throughout a large selection of books; this book is the guide to show you where to begin. </p>