IntroductionJoline Blais and Jon Ippolito, Friday 29 February 2012, v1.5
Introduction10 minutes
This hands-on session in Redesigning Reality shows how to hack the "scripts" that govern us to make everyday life more sustaining and sustainable. In this workshop, you'll redesign your favorite foods and Web sites, looking to nature as a model for the victual and virtual.
35 minutes
Analyze a recipe for the California Burrito.
Joline Blais reviews Permaculture principles.
Review the recipe. Where does it embody permaculture design? Where does the recipe violate it?
15 minutes
Now make a better burrito using the principles of permaculture and the ingredients in front of you.
Redesigning the Web10 minutes
Greasemonkey is a browser plugin that helps you localize the Web by redesigning pages to add, subtract, or change HTML elements.
(Note: this demo assumes you have the following installed: Firefox 10, Firebug 1.10, and Greasemonkey 0.9).
5 minutes
Install the following on your laptop:
* The Firefox browser.
* The Firebug add-on for Firefox (click Install to Firefox here).
* The Greasemonkey add-on for Firefox (click Add to Firefox here).
10 minutes
Visit http://nytimes.com
Click the bug icon on your browser toolbar, then check the window at bottom to make sure there is an HTML tab at left and Style tab at right.
Click on the <body... tag at lower left, then find body { background-color: #FFFFFF; at lower right. Click on the color code #FFFFFF and overwrite it with the word teal (or another dark color of your choosing).
Underneath background-color, you'll see color: #333333;. Overwrite this designation of the font color (#333333) with the word pale; this will prompt Firebug to complete the word with a Web-safe color, such as paleTurquoise. You can choose from colors beginning with "pale" using the down arrow, or type your own color.
10 minutes
Now click on the Console tab at left, and make sure the word "Run" appears at lower right. In that box, paste this code:
allImages = document.getElementsByTagName( "img" ) ;
for ( var imageCounter=0; imageCounter < allImages.length; imageCounter++ ) {
var oldHeightPx = allImages[ imageCounter ].offsetHeight + "px" ;
var oldWidthPx = allImages[ imageCounter ].offsetWidth + "px" ;
allImages[ imageCounter ].src = "http://tinyurl.com/empty-nyc" ;
allImages[ imageCounter ].style.height = oldHeightPx ;
allImages[ imageCounter ].style.width = oldWidthPx ;
} ;
Make sure all capitalization and punctuation is correct, then click Run at bottom. You've just changed all the images with JavaScript!
5 minutes
Click the tiny blue box with an arrow on it at far left ("Click an element in the page to inspect"). Now click on the New York Times logo. Find the img tag highlighted in blue at lower left. Click in the URL in quotes after src=, then change the URL (only) to any other image URL, eg http://tinyurl.com/occupy-nyt.
Inside the img tag highlighted in blue, you'll see that the id for the img tag is mastheadLogo. We'll use this fact in our next step.
15 minutes
Click the arrow next to the monkey icon and choose New User Script...
Give your script a name ("Cool NYT") and any URL for the Namespace (such as your own domain, it doesn't matter). Make sure the site http://www.nytimes.com is under Includes. Then click OK and go to your text editor.
If prompted to choose a script editor, pick TextEdit (Mac) or Notepad (Windows) unless you have a better code editor installed.
Your new script should already be open. Click at bottom and add some new lines, then paste the following lines of JavaScript that summarize our work so far:
allImages = document.getElementsByTagName( "img" ) ;
for ( var imageCounter=0; imageCounter < allImages.length; imageCounter++ ) {
var oldHeightPx = allImages[ imageCounter ].offsetHeight + "px" ;
var oldWidthPx = allImages[ imageCounter ].offsetWidth + "px" ;
allImages[ imageCounter ].src = "http://tinyurl.com/empty-nyc" ;
allImages[ imageCounter ].style.height = oldHeightPx ;
allImages[ imageCounter ].style.width = oldWidthPx ;
} ;
document.body.style.backgroundColor = "teal" ;
document.getElementById("mastheadLogo").src = "http://tinyurl.com/occupy-nyt" ;
Then save your script.
Back in Firefox, click the monkey icon to disable Greasemonkey, then reload to see that the site has been reset. Then click the monkey back on and reload to see your changes take permanent effect!
5 minutes
Customize your Greasemonkey script however you like.
Post to Facebook, Twitter.