Spring 2010: http://prof.crouse.cc/web_as_platform/spring_2010

Google’s announcement of the Chrome OS provided a definite time line for what has been on the horizon for some time: web-based personal computing. With this radical change in the way we think about personal computing, languages once thought of as too rudimentary for “serious” application programming (namely JavaScript) are becoming more important. This class will look at the nuts and bolts of Web Application Development, including HTML, CSS, JavaScript, and PHP, as well as the implications of viewing the web as a platform. We will look at the current landscape of web apps and services, including Mechanical Turk, Amazon S3, Facebook, and Google Maps, and learn to use these services in our own work. We will cover many popular libraries, such as JQuery, Blueprint CSS, and the Google Web Toolkit and App Engine. This class is for students who wish to learn the basics of how to make functional web applications. The class will start with a 2 week HTML/CSS intensive review, so students with no HTML/CSS experience should expect some extra work.

ABSML is a markup language that is used in a variety of problems incluing Inside the Artists Studio, Befriend a Recruiter and MadLibs Karaoke, and the winner of a 2008 Turbulence grant.

Here is an example of what some ABSML code looks like:

<sentence id="q-art-14" >Have you considered <pickone>creating, making</pickone> <pickone>more, less</pickone> <library>modifier</library> <library plural="true"><get>medium</get>_outcome</library>?</sentence>

<sentence id="q-art-15">You had an exhibition at <organization><source><get>website</get></source></organization>. Some say this was a turning point in your career. <pickone>Do you agree?, but I have my doubts, I'm curious what you think.</pickone></sentence>

<sentence id="q-art-16">Do you ever <pickone>wonder if this is all, wonder if this could be considered </pickone> all just a big shaam?  and - why do you think so?</sentence>

<sentence id="q-art-17">Tell <pickone>me, our listeners</pickone> about your exhibition last year at <organization><source><get>website</get></source></organization>.</sentence>

<sentence id="q-art-17"><pickone>I will let Alfred know., Alfred sometimes makes mistakes., I will speak to Alfred about this.</pickone></sentence>

<sentence id="q-art-18"><pickone>My youngest son - Alfred, Alfred- my youngest son</pickone> <pickone>is a fan of, enjoys </pickone> <pickone>your earlier work, early work, the work from the beginning of your career </pickone> in <city><source><get>website</get></source></city> <pickone>personally I am not a fan - however, but he is young and has childish tastes </pickone> - <pickone>for the benefit of our listeners, for the radio audience</pickone> <pickone>please tell us, do tell us</pickone> <pickone>about, of </pickone> your early career.</sentence>

<sentence id="q-art-19"><pickone>Tell me more about, Let us discuss, Let us return to </pickone> your relationship to <city><source><get>website</get></source></city>, <pickone>which, which I must say </pickone> <pickone>is one of my favorite cities, holds a special place in my heart, is near and dear to me.</pickone>.  How do you feel about it?</sentence>

<sentence id="q-art-20">What about your <pickone>most recent, latest</pickone> <library plural="false"><get>medium</get>_outcome</library>?</sentence>

<sentence id="q-art-21" >But is that really art?<pickone> or something else entirely?, or a <library>modifier</library> fantasy?</pickone></sentence>

<sentence id="q-art-22" >Tell me about your teaching practice at <organization with="University, College, Academy, Institute, school"><source striptags="true"><get>wesbite</get></source></organization>.</sentence>

Delete City uses the ridiculous storage allotment of web hosting services like Dreamhost to cache large amounts of user generated content from sites like YouTube, Flickr, Facebook, etc. and then monitors to see if any of this content is subsequently taken down. When it finds removed content, it automatically posts the content to your WordPress blog. The nature of the content can be customized by the user by site, keyword, and other criteria. Devious? Maybe. But also one step in the fight against censorship.

The DeleteCity plugin is currently in development and should be released in November.

The first Dirt Party took place at the Eyebeam 10th Anniversary Benefit, where the output was a series of dynamically generated tabloid covers.

Gearbox is the outcome of twelve-months development work between the MediaShed and Eyebeam Art and Technology Centre in New York, to create a resource for low-budget filmmaking. Comprised of “how to” step by step examples, Gearbox shows people innovative ways of recording footage using unusual combinations of found resources (such as CCTV Video Sniffin’ or Spy Kiting) and low-budget methods of reproducing professional film making techniques (for example, achieving a crane shot using a fishing pole).

“Taken at face value, You3b is an absolutely horrible idea. “
- downloadsquad.com

“If your Youtube addiction has you seeking out more and more videos, constantly, non-stop, perhaps you’d be satisfied once and for all with You3B.”
-killerstartups.com

/**
*	Represents one Craigslist page.
*	Can either be a page of results or a single listing page.
*/
class Craigslist extends PlacemarkSource {

private $url;

private $type;

const url_pattern = "/craigslist/i";

private $regexes = array(
/**
*	This should match the URL of any single Craigslist listing page.
*	They will look like
*	http://montreal.craigslist.org/sub/298262212.html
*	http://newyork.craigslist.org/brk/sys/299139631.html
*/
'single_listing_url' => "/craigslist\.[a-z]{2,3}\/(.+).html/i",

/**
*	This should match the URL of any page with multiple Craigslist pages
*	These pages may look like :
*	http://newyork.craigslist.org/search/bik/brk?query=&minAsk=min&maxAsk=200&hasPic=1
*	OR
*	http://montreal.craigslist.org/sub/
*	http://newyork.craigslist.org/que/bik/
*	BUT NOT
*	http://montreal.craigslist.org/sub/298262212.html
*	http://newyork.craigslist.org/brk/sys/299139631.html
*/
'multiple_listing_page_url' => "/craigslist\.[a-z]{2,3}/i",

/**
*	This should match the URL of any Craigslist listing feed.
*	These pages should looke like:
*	http://philadelphia.craigslist.org/apa/index.rss
*	http://philadelphia.craigslist.org/search/apa?query=&minAsk=&maxAsk=200&bedrooms=&addTwo=purrr&addThree=wooof&hasPic=1&format=rss
*/
'feed_url' => "/craigslist\.[a-z]{2,3}\/(.+)(index\.|format=)?(rss)/i",

/**
*	This Regex should match 1) URLs of listing pages 2) Titles of listings
*/
'get_listings' => "/<p>(.*?)<a href=\"(.*?)\">(.*?)<\/a><font size=\"-1\"> \((.*?)\)<\/font>(.*?)?<\/p>/i",

/**
*	In the pages of most Craigslist listings, the city that you are exploring is in a link at the top.
*	<a href="http://philadelphia.craigslist.org">philadelphia craigslist</a>
*	or
*	<a href="/"> new york craigslist</a>
*/
'city_in_title' => "/<a href=\"(.+)?\">(.*?) craigslist<\/a>/i"
);

/*
*	The constructor for a Craigslist listing.
*	Most times, if you are parsing an entire page of listings, you will know the city
*	for every posting and the title along with the url before you construct them.  So if you
*	provide them, the constructor will go faster.
*/
function Craigslist($_url, $limit=null) {

$this->url = $_url;
$this->limit = $limit;

// First we will figure out what kind of page we are dealing with.
if(preg_match($this->regexes['single_listing_url'], $this->url)) {

$this->type = "single"; // an actual listing page.

} else if(preg_match($this->regexes['feed_url'], $this->url)) {

$this->type = "feed";	// A feed of listings

} else if(preg_match($this->regexes['multiple_listing_page_url'], $this->url)) {

$this->type = "multiple";  //  a search results or browse page

}
}

/**
*	Takes a relative URL from the current page and turns it into a full URL.
*/
function unrelativize($relative_url) {
$u = parse_url($this->url);
if(substr($relative_url, 0, 1) == '/') {
return "http://".$u['host'].$relative_url;
} else {
return "http://".$u['host'].dirname($u['path']).$relative_url;
}
}

/*
function parsePlacemarks() {
foreach($this->placemarks as $p) {
$p->parse();
}
}
*/

function getPlacemarks() {

switch($this->type) {

// It is a single listing, so just parse the current page.
case 'single':
$this->placemarks[] = new CraigsListing($this->url);
break;

// If if is a page of many listings, get all of the URLs.
case 'multiple':
$content = HttpClient::quickGet($this->url);

// The city appears in a link at the top.
preg_match($this->regexes['city_in_title'], $content, $matches);
$city = $matches[2];

//assert('$city!=null');

preg_match_all($this->regexes['get_listings'], $content, $matches);
$listing_urls = $matches[2];
$titles = $matches[3];
$locations = $matches[4];

foreach(array_keys($listing_urls) as $i) {
$listing_urls[$i] = $this->unrelativize($listing_urls[$i]);
}

if(count($listing_urls) == 0) {
trigger_error("Earthify couldn't find any listings on the page you provided.");
}

// Loop through all of the matches and make placemarks from them.
$max = isset($this->limit)
? min(count($listing_urls), $this->limit)
: count($listing_urls);

for($i=0; $i<$max; $i++) {
// Check to make sure the link exists first
if(HttpClient::url_exists($listing_urls[$i])) {
$listing = new CraigsListing($listing_urls[$i]);
$listing->setTitle($titles[$i]);
$listing->setCity($city);
$this->placemarks[] = $listing;
} else {
trigger_error("{$listing_urls[$i]} returned a 200 or 302 status, which means that it doesn't exist.", E_USER_WARNING);
}
}
break;

// If this is the RSS feed from a particular kind Craigslist page, just parse the RSS
case 'feed':
$content = HttpClient::quickGet($this->url);

$xml = new SimpleXMLElement($content);

// The city name appears in the channel title.
preg_match("/<title>craigslist \| (.*?) in (.+)<\/title>/", $content, $matches);
$city = $matches[2];

//assert('$city!=null');

// Loop through all of the matches and make placemarks from them.
$max = isset($this->limit)
? min(count($xml->item), $this->limit)
: count($xml->item);

for($i=0; $i<$max; $i++) {

$link =  (string)$xml->item[$i]->link;

// Check to make sure the URL exists first.
if(HttpClient::url_exists($link)) {
$listing = new CraigsListing($link);
$listing->title = (string)$xml->item[$i]->title;
$listing->city = $city;
$this->placemarks[] = $listing;
} else {
trigger_error("{$listing_urls[$i]} returned a 200 or 302 status, which means that it doesn't exist.", E_USER_WARNING);
}
}
break;
}

return $this->placemarks;
} // end getPlacemarks()
}

/**************************
*
*	Serializer.php
*	Turns an array of Placemark objects into an Earthify KML script.
*
*	Written by Jeff Crouse at Eyebeam
*	February 8, 2007
*
***************************/
class KMLSerializer {

public static function serialize($placemarks) {

// Create the XML document and the root tag (kml)
$dom = new DomDocument('1.0', 'utf-8');
$root = $dom->createElement("kml");
$dom->appendChild($root);

// Create the Document tag
$doc = $dom->createElement("Document");
$root->appendChild($doc);

// Add a Earthify tag to the document tag.
$doc->appendChild($dom->createElement("name", "Earthify"));

// Make two folders within the document.  One for locatable items, one for lost ones
$found = $dom->createElement('Folder');
$found->appendChild($dom->createElement("name", "Earthifyable Listings"));
$doc->appendChild($found);

$lost = $dom->createElement('Folder');
$lost->appendChild($dom->createElement("name", "Un-Earthifyable Listings"));
$lost->appendChild($dom->createElement("description", "Items whose coordinates could not be geocoded."));
$doc->appendChild($lost);

// Loop through all of the listings and add them to the document.
foreach($placemarks as $placemark) {
if($placemark instanceof Placemark) {

// Make the placemark tag in which all of this shit will go.
$placemark_dom = $dom->createElement("Placemark");
$placemark_dom->setAttribute("id", $placemark->getId());

// Make the name tag for the Placemark
$name = $dom->createElement("name", htmlspecialchars($placemark->getTitle()));
$placemark_dom->appendChild($name);

// Make the description tag for the placemark.
$description = $dom->createElement("description");
$cdata = $dom->createCDATASection($placemark->description());
$description->appendChild( $cdata );
$placemark_dom->appendChild($description);

// If we can't find any coordinates, add this item to the "lost" folder.
if($placemark->getCoords()) {
// Make the Point element for the placemark
$point = $dom->createElement("Point");
$coords = $dom->createElement("coordinates", $placemark->getCoords());
$point->appendChild($coords);
$placemark_dom->appendChild($point);

// Add the placemark to the "Found" folder
$found->appendChild($placemark_dom);
} else {
$lost->appendChild($placemark_dom);

}
} else {
trigger_error("KMLSerializer received something that wasn't a Placemark.", E_WARNING);
}
}

return $dom->saveXML();
}

Hit! or Sh!t is a media delivery system that recommends media that the user is likely to enjoy based on submitted ratings, and also creates networks between the users based on both real-world connections and statistically-generated ones. Original concept by David Jimison. Funded by mtvU Digital Incubator. Hit! or Sh!t was built using Flash and SOAP (PHP/MySQL).

12 22 htorsht

While in graduate school, I worked as a Graduate Research Assistant, building tools and generally organizing the web presence of the IDT program, and eventually moving on to related programs.� In this role, my responsibilities included many things.

As the lead programmer on the IDT web team, I developed an intranet on the IDT website where students can log in and get various forms, edit their profiles, and take surveys, among other functions.

As an employee of Ivan Allan College, I began work on what was to become a college-wide faculty information tool. It included an extensive set of forms, and features for exporting reports to Microsoft Word.

Along with the IDT Intranet and IAC Facutly Database (also listed here), the LCC Content Management System comprised the bulk of the work that I completed while the lead web programmer at the School of Literature, Communication and Culture at Georgia Tech.� The LCC Content Tools are used primarily to update the LCC website. They include tools for creating surveys, updating news, FAQs, course information, and sending out mailers to students.

inSite is an international arts festival that took place in 2005. I worked on this site while at FDT in New York. It included a complex navigation system and content management system. I was the lead programmer.

11 21 31 41 51 insite

AgoraXChange is a project by Natalie Bookchin and Jackie Stephens, designed by FDT Design in New York. I was responsible for all of the CSS layout, database design and implementation, and a content management system.

01 02 03 04 05 axc

I created this site in 1999, and a redesign in 2000 with Formscience for a video producer in New York. It includes a client login system and a portfolio of work.

11 22 32 42 mm