Blog

Leonardo—The International Society for the Arts, Sciences and Technology

July 7th, 2009

I worked with the staff of the International Society for the Arts, Sciences and Techonolgy (ISAST), publishers of the Leonardo journal, to redesign their site. During the project I performed a full scale design process from stakeholder interviews to getting reactions on moodboards to presenting a variety of page comps to finally building and producing the site. Many thanks to the staff at Leonardo for working closely with me every step of the way. Visit leonardo.info.

Leonardo website

leonardo-sub-about

Prototype + Script.aculo.us Slideshow

September 13th, 2008

Here’s a snippet of code I put together for my animation and interactivity class.  It’s a slideshow that uses Prototype and script.aculo.us.

View a demo

Here’s the JavaScript that appears in the header:

<script language="JavaScript" type="text/javascript">
var i = 0;
var slide;

function SlideShow() {
$( slide[i] ).fade({ duration:5 });
i++;
if (i == slide.length) i = 0;
$( slide[i] ).appear({ duration:5, afterFinish: function () { SlideShow(); } });
}

document.observe(`dom:loaded`, function () {
$$(`#myslideshow img`).each(function(image){
$(image).hide();
});
slide = $(`myslideshow`).childElements();
$( slide[0] ).appear({ duration:1, afterFinish: function () { SlideShow(); } });
});
</script>

Some basic CSS also appears in the header to place the images in the right location on the page:

<style type="text/css">

</style>

This basic HTML appears in the body to load the images for the slideshow. Any number of images can be added here:

<div id="myslideshow">
<img src="images/IMG_0350.jpg" width="600" height="450" />
<img src="images/IMG_0351.jpg" width="600" height="450" />
<img src="images/IMG_0352.jpg" width="600" height="450" />
<img src="images/IMG_0353.jpg" width="600" height="450" />
<img src="images/IMG_0354.jpg" width="600" height="450" />
</div>

This slideshow uses several Prototype and script.aculo.us functions. It uses two basic combination effects, Fade and Appear. Other functions:

$document.observe() keeps the functions from starting until the page has loaded. For instance, if the images haven’t been quite loaded and the scripts start to run, things could go wrong or nothing could happen at all.

document.observe('dom:loaded', function () {
//place scripts here
});

$(‘element’).childElements() allows us to grab all the items nested inside of an object on the page. In this case we want to grab all the images that are in the “myslideshow” div to use in the slideshow. The items are then stored in an array which we called “slide”.

slide = $('myslideshow').childElements();

afterFinish is used in the appear function in several places. It allows us to call a function after the current slide has faded in. In the SlideShow function notice that in the appear function for afterFinish we actually call the function itself–SlideShow refers to itself. This is what’s called a recursive function. This causes the slideshow to loop.

$( slide[i] ).appear({ duration:5, afterFinish: function () { SlideShow(); } });

WordCamp SF 2008

August 16th, 2008

Finally made it out to WordCamp in San Francisco.

Some interestingness that I encountered today:

Also got a free t-shirt, lunch, and tons of coffee!

Lunch!

Sea of computers.  Are there more computers than people in this picture?

Sea of computers. Are there more computers than people in this picture? Taken at the beginning of Matt Mullenweg's talk

Alternative Exposure

March 27th, 2008

Alternative Exposure (smaller image)

Southern Exposure’s granting program Alternative Exposure released its grantees website this month. I worked with Southern Exposure to create the look and feel based on printed materials, brochures, and a set of logos.  I built the site using WordPress for content management and user account management. Grantees can login and update their project pages, post an image, and post events. The site will also auto-archive the list of grantees each year as their granting program progresses.

Southern Exposure is a nonprofit art exhibition space in San Francisco.

Strange Weather Launches Today!

March 13th, 2008

Strange Weather is on view at Eyebeam (http://www.eyebeam.org) in New York City.

http://www.strangeweatherproject.net

Web Design Bootcamp: Post-workshop files

March 11th, 2008

Thank you to all the people who attended the Web Design Bootcamp at DVC last weekend! I had a brilliant time.  It was great to work with you and share a whole lot of knowledge about Web Design.  I’ve made the presentation and project files available for you to download.

Downloads:

Also, links to sites that were referred to in this class:

Best of luck to you in your future Web Design projects!

ATA’s Auction at Receiver Gallery

January 24th, 2008

2008, Gilbert Guerrero, “Portrait (Overworked)”, Ink on Arches PaperA rather mysterious drawing that I made is in a group show at Receiver Gallery. The show is only up for a few days, January 23-26, 2008. It’s a benefit for Artists’ Television Access. Please come by and bid on my drawing! The auction closing party is on Saturday.

Title: Portrait (Overworked)
Ink on Arches paper, 2008, Gilbert Guerrero.

Receiver Gallery:
1415 Valencia St. @ 25th St http://receivergallery.com/

Preview & Silent Auction
Wed-Friday, January 23-25
10 am-6 pm, free

Reception & Auction Closing Party
Saturday, January 26, 2008
7 – 10pm (auction concludes at 8:30 pm)
$10 admission (may be applied towards a purchase); Admission is free for Members.

More info: http://www.atasite.org/calendar/?x=2741

Winner of the 2007 Eyebeam Eco-Vis Challenge

January 8th, 2008

I’ve been working with The Studio for Urban Projects and recently we submitted In Popular Terms as part of a proposal for Eyebeam’s Eco-Vis Challenge. And we won first prize!  In Popular Terms will be rethought and redesigned for the challenge.  The exhibition opens in New York City on March 6th.

Eco-Vis Challenge

More news »