Mixing and Remixing Information

Take aways from today:

We will shift the focus from working on exercises derived immediately from the book to ones that will help students complete their projects
We will look for ways to create a “learning exchange” by identifying topics and techniques for which there is interest in learning and for which we have some expertise. An example: Drupal might be a useful content management framework for which there is both expertise and interest in this class.

Class notes:

Focus on Chapter 8 (and then Chapter 10)

how to use Ajax widgets, JavaScript-based programs created by others to express some functionality, as a way to a study of Ajax.
how to use some debugging tools such as Firebug and the JavaScript Shell that will help you make sense of these widgets

Trajectory:

mapping geotagged Flickr photos with Google Maps, Google Earth, and Google Mapplet.

To become a master programmer of the web browser, you should understand the following

Both how an ideal W3C DOM standards-compliant browser works and how various browsers actually work in various areas: how JavaScript is implemented, object model behavior, CSS, and events
JavaScript-based APIs and widgets such as Google Maps—what they are and how to use them
Nonbrowser environments for JavaScript, such as Google Gadgets, Yahoo! Widgets, and Adobe Acrobat
Extension mechanisms in browsers (such as Firefox add-ons)
JavaScript and browser debugging tools such as Firebug
JavaScript libraries: how they relate and what can be intermixed—and which ones are tied to which web programming frameworks
What people have done already on all these fronts using JavaScript and remixing the browser
How to write JavaScript and JavaScript widgets that can be reused by other people, including cross-platform JavaScript
What you can do in terms of mashups

Fortunately, you do not need to know all these things to merely get started.

Some exercises:

Supporting tools:

JavaScript Shell
Firebug – Web Development Evolved
DOM Inspector :: Firefox Add-ons (starting with FF3, you need to install it as an extension)
Chickenfoot
(With chickenfoot, you can access the window using window.wrappedJSObject

Which JavaScript libraries to look at? One list would be the libraries supported in by the AJAX Libraries API – Google Code:

In my book (p. 210), I mention: Dojo, Mochikit, prototype/script.aculo.us, Yahoo! UI Library (YUI), Rico, and OpenLaszlo.

YUI examples

1) using local storage:

in ~/public_html:

curl -v -L -X GET "http://developer.yahoo.com/yui/download/" -o yui_2.7.zip
unzip yui_2.7.zip

See:

Then run JavaScript shell, Firebug console, Chickenfoot on the tree variable.
For Chickenfoot:

var wwindow = window.wrappedJSObject;
wwindow.tree.expandAll();

2) using the Google Ajax Libraries API

Google Maps

Flickr

Search