Stephen Wyatt Bush Blog

Going to Shut Down and Improve

Stephen Bush — Sat, 11 Jul 2009 16:12:50 +0000

I think it’s time that I shut down this site and redesign. This site was great at the time it was built: I was just beginning to understand the web and web design. Now I am ready to create a more engaging site, one with more dynamic content and smarter presentation.

Coding Thesis Piece in PHP

Stephen Bush — Wed, 15 Apr 2009 03:50:49 +0000

Note: This post is a follow-up to Coding Thesis Piece in Javascript

The Markup Including PHP



    
        PHP Test
        
        
        
        
    

    
        
            
                                // Call Flickr's API and return JSON object, it comes wrapped inside jsonFlickrApi();
                $flickrResponse = file_get_contents("http://www.flickr.com/services/rest/?method=
                       flickr.photos.getRecent&api_key={apikey}&format=json&per_page=1", true);

                // Remove the "jsonFlickrApi(" from the beginning of the JSON object
                $flickrJSON = str_replace("jsonFlickrApi({", "{", $flickrResponse); 

                // Remove the closing ")" from the JSON object
                $flickrJSON = substr_replace($flickrJSON,"",-1);

                // Run PHP's json_decode(); function to turn JSON object in PHP array
                $json_flickrObject = json_decode($flickrJSON);

                // Create variables containing the values of nodes needed to construct Flickr img URL
                $farm = $json_flickrObject->photos->photo[0]->farm;
                $id = $json_flickrObject->photos->photo[0]->id;
                $server = $json_flickrObject->photos->photo[0]->server;
                $secret = $json_flickrObject->photos->photo[0]->secret;

                // Call Twitter's API, return JSON object
                $twitterResponse = file_get_contents("http://search.twitter.com/search.json?q=the&rpp=1",
                       true);

                // Run PHP's json_decode(); function to turn JSON object into PHP array
                $json_tweetObject = json_decode($twitterResponse);

                // Extract "text" from the first index of array "results" inside $tweetObject
                print ($json_tweetObject->results[0]->text);
                ?>
            

            
                                // Insert needed variables into string to create  tag to Flickr image
                echo "";
                ?>

What’s Changed, Why It Matters

Building the page to be independent of Javascript is advantageous from an accessibility standpoint, particularly in that it allows the document to function properly even if a user’s browser has Javascript disabled, or if Javascript malfunctions due to another open window. Because PHP is a server-side scripting language, all functionality is taken care of before information is sent to the browser. I’d display a working model of this version but my host doesn’t have PHP5 installed, therefore the json_decode(); function does not work properly. However, just know that it renders the same, the key differece being that the source code displays all HTML generated by the PHP, whereas the previous version did not. Scripting on the server-side also keeps my api key (and any other important information in other cases) hidden from view of any user who uses the “view source” command. This project has been an exciting learning experience. This is my second attempt to code anything with PHP, I’m glad to say it worked out in only a couple hours. Enjoy! Questions? Comments?

Coding Thesis Piece in Javascript

Stephen Bush — Wed, 15 Apr 2009 02:34:44 +0000

Note: This post serves to address the creation of my piece in the 2009 UTC Senior Show, previously covered in this article.

The HTML

The markup for this document is relatively short and simple. It serves to create a template into which the Javascript can inject content. Both tweets and images are later inserted into #tweets via javascript, using jQuery’s DOM manipulation to create
and tags.

                    Stephen Bush Thesis



The Javascript

The javascript uses the jQuery library, a solid foundation upon which to build the AJAX functionality of this site. The script first creates arrays for both photos and tweets, then establishes the functions which will retrieve and parse data from Flickr and Twitter, and then injects the results in the HTML.

// Create arrays var tweets = new Array(); var photos = new Array(); // Create
and tags in #tweets. If each photo in the array has been used, reuse the first. function processData(){     $("#tweets").html("
" + tweets.shift() + "
")     if (photos.length){         var preload = new Image();         preload.src = photos[0];     }    } // Call Flickr's API and return the most recent x photos from the public timeline in JSON format. // Loop through the results in array, selecting nodes from the JSON to construct the URL of respective Flickr image. function getRecentPhotos(){     $.getJSON("http://www.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key={apikey}&format=json&per_page=14&jsoncallback=?", function(data){         $.each(data.photos.photo, function(i, item){                photos[i] = "http://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + ".jpg";         });     });        } // Call Twitter's API and return the public timeline in JSON format // Loop through each tweet in the array, extracting the text node from each. function getRecentTweets(){     $.getJSON("http://search.twitter.com/search.json?q=the&callback=?", function(data){             $.each(data, function(i, results) {             tweets[i] = "" + results.text + "";         });     }); } // Once the window has loaded, execute processData() each 7 seconds, injecting new content into the template. $(window).load( function() {     processData();     setInterval(processData, 7000); }); // When the document is ready, initialize AJAX Setup, do not cache. // Return a new set of photos every 50 seconds // Return a new set of tweets every 61 seconds $(document).ready( function() {     $.ajaxSetup({cache: 0 });     setInterval(getRecentPhotos, 50000);        getRecentPhotos();     setInterval(getRecentTweets, 61000);        getRecentTweets(); });

The CSS

Cascading Style Sheets give style to the document, centering the tweets and images in a fixed-width frame in the center of the page. The background color becomes black and the text is set in white Lucida Grande. Also a slight gradient .png file is placed behind the content inside the frame. The html bottom-margin 1px hack ensures that the scroll bar is always present on the right of the browser to avoid shifting the image left on longer pages.

#tweets { margin-top: 50px; margin-left: auto; margin-right: auto; border: 1px solid gray; width: 500px; padding: 10px; background-image: url(gradient.png); } p { font-family: Lucida Grande, Helvetica Neue, Helvetica, Sans-Serif; font-size: 20px; line-height: 26px; color: white;    float: left; width: 500px; height: auto; display: block; margin: 0 auto; padding-bottom: 10px; } img { width: 500px; height: auto; clear: left; } body { background-color: black; } html { height: 100%; margin-bottom: 1px; }

The Result

This piece was displayed in UTC’s Cress Fine Arts Gallery during the 2009 Senior Show, a collection of works from graduating students of painting and graphic design. It filled a small side gallery and was projected to such a size that images were 5 feet wide, not just 500 pixels.

The finished product behaves like a slideshow of image and caption, with one random tweet paired with one random image every seven seconds. The downfall of this code is that if a user has javascript disabled or javascript should be disrupted by another browser window, the application fails to function at all. To address this, I will recreate the functionality of this piece in PHP in my next post. Enjoy!

View the piece online.

Sample

Designing the Physical Portfolio

Stephen Bush — Tue, 07 Apr 2009 19:05:35 +0000

The files that will be printed and assembled to make my physical portfolio are now complete. After they are assembled they will live in a slick-looking aluminum case, and will be supplemented by my cleanly soon-to-be-designed resume and some leave-behind materials for the Portfolio Review coming soon.

View the work online.

Each file features a few images of the work, a brief description of the work, a list of deliverables presented to the client, a list of skills exercised in completing the project, details on when the project was completed, and itemized descriptions of each image. Enjoy.

Senior Thesis Show 1 2009

Stephen Bush — Fri, 03 Apr 2009 04:28:31 +0000

Preface

Senior Thesis Show 1 has launched and is currently on display in the Cress Gallery in the Fine Arts Center. This marks the culmination of my BFA experience at the University of Tennessee at Chattanooga. My piece, an exploration in the formation of meaning and the relation between image and text, is on display in the side gallery. Running from a hidden computer, it projects the contents of this page on a web browser onto a large canvas. It is accompanied by ambient music from SomaFM’s Drone Zone. The artist statement further covers what the project is about:

Artist Statement

Untitled
Stephen Bush
XHTML, CSS, Javascript
The idea becomes a machine that makes the art. – Sol Lewitt

In an attempt to explore the construction of meaning, images, text, and sound are combined, bereft of context. In and of themselves, each element is a container and messenger of its own accord. When the three conjoin, a new essence is offered to the viewer for interpretation. To allow for thorough investigation of this idea, live streams of images, text, and music are drawn from unconnected social media sources. Repeated observation of this process establishes a narrative; transient and unending.

Melding Art and Programming

The piece began as an attempt to examine the impact that each individual variable and consideration of design can have on information. I planned to create posters and books exploring every possible combination of a set of variables, such as font, font-weight, font-style, color, scale, image, and more. Realizing that this would be time consuming and would not teach me anything new, I decided to pursue writing a program to combine the elements for me. After exploring this idea for a while, I instead tapped into application programming interfaces (APIs) of established social media sites (Twitter and Flickr) with Javascript to provide the content to be randomly combined. All code involved will be covered in a later blog post, so get excited!

Presentation on Process

Before opening the gallery, all graphic design majors gave 5 minute Keynote presentations about our work. This served as an excellent opportunity to refine our public speaking skills and to clearly communicate our project concepts to the audience before our pieces had even been viewed. Slides will soon be posted to Slideshare, accompanied by another sweet blog post about the presentation. It was pretty much exciting and fantastic.

Outstanding Turnout

In advertising for this exhibition, our class turned not only to traditional means of fliers and postcards (which were beautifully designed by classmates), but also to social media. Utilizing Twitter & Facebook, I personally invited over 700 people to the opening. This was certainly the most packed house that the Cress Gallery has ever hosted, and I think the spectators came for more than just the free food!

In Closing

Thanks to all who came to support us. The work will be on display in the gallery for another week, so if you are in the area, I greatly encourage you to check it out! Also the second show opens April 10th, and promises to be just as great. The UTC Art Department produces some truly talented and motivated individuals, come be a part of the exciting UTC and Chattanooga Arts Community.

Photo By Jessi Taylor

Highlights of SXSW 2009

Stephen Bush — Tue, 24 Mar 2009 13:42:39 +0000

South By Southwest proved to be a memorable and exciting experience, a high point in my college career. It proved an incredible opportunity to meet both the people whose work I’ve admired for years, and those unfamiliar to me. The combination its welcoming atmosphere, geek community, and incredible programming made South By Southwest completely awesome. Here are a few photos I took.

Favorite Things About SXSW 2009

Living and commuting with Glenda Simms

Watching Pouncer get inside a hamster ball

Meeting Varick and Travis of ngenWorks and Happy Webbies at the Houston Airport

Dinner with the Opera folks – Thomas, Chris, Henny, Lawrence, Chaals

Hanging out with Chris Mills, talking web, beer, and metal

Meeting Fellow Chattanooga Aaron Gustafson

Seeing Watchmen and meeting Dan Rubin

Everything You Know About Web Design is Wrong presentation by @uxcrank

Meeting the guys from ClearLeft – Andy, Paul, and Jeremy

Paul’s Presentation

The fact that SXSWi has more attendees than UTC has students

Meeting Liz Danzico and discussing SVA’s MFA Interaction Design program

Rob Weychert.

Receiving a compliment on my business card from David Carson

Seeing the premier of Objectified

Eating with Paul, Jason, Regina, and others of Apple.com

Happy Cogaoke!

Meeting IE8 Architect Chris Wilson

Knowing Aarron Walter

Blue Flavor guys and the 97 Bottles Party

Patrick and his kilt

Watching Leslie present

Watching WaSP Interact unveil itself

Getting involved in the web ed discussion #sxswed

Meeting Jeffrey Zeldman

PF Changs with some incredible people whom I adore and admire

Meeting new Chattanoogans The Matt Harris and Cindy Li

Dinners with Geert and Veerle

Fortune cookie reading “A golden egg of opportunity falls into your lap this month.”

Wine and cheese party hosted by Jeremy Keith

Being included in inclusive events by Chris Mills, Kenneth Himschoot, Aarron Walter, Aaron Gustafson, Shaun Inman, Rob Weychert, and all the wonderful people who were good to me

Talking with Damien Schaefer of Herosion

Meeting Jason Santa Maria

Meeting Jason Beaird

Zen Gardening with Dave Shea

All the kind people of Yahoo! Especially Will and Micah

Browser Wars panel, particularly Chaals’s responses

Being able to approach and talk to anybody

Dinner with the Tubatomic guys

Finally meeting the Tubatomic guys

Color Angels panel

Celebrating four months, no cigs. And not caving at the parties.

Thinking at some point that a fanny pack would be cool

Hearing about OOCSS straight from Nicole

St. Patrick’s Day in Austin

Margaritas at 2pm at the Iron Cactus

Cajun platter with Veerle, Geert, Jeremy Keith, Jessica, Dave Shea, and Nicole

Table drawing with Veerle

Achieving Nerdvana

Being able to approach anybody and talk JS debugging, css, html, etc.

Buying an iPod touch to keep up with Twitter during SXSW

Playing Shaun’s Horror Vacui the entire flight back

Following up with the great people I met

Feeling full of energy and inspiration

Looking forward to the future

Planning next year’s SXSW excursion

There is likely more than I can remember. The entire SXSW experience was incredible. I thank Leslie, Christopher, and Glenda for their roles in making South by a possibility for me. It was truly inspiring, exciting, and something I hope to do again.

RSS Makes My Life Better

Stephen Bush — Tue, 03 Mar 2009 07:15:58 +0000

The Morning Paper

Recently, for some reason unbeknown to me, I subscribed for four months of my local paper. I thought I might wake up in the morning, toast some buttered bread, brew some fresh coffee, and settle down with the paper while the sun rose and filled my kitchen. No, let’s be honest. That vision is quite idealistic. The papers pile up in my driveway. Each morning I hurriedly drive over it, and in the evening I give it a good “because I paid for it” once-over. Subscribing seemed like a good idea, really. Getting From College To Career even told me to subscribe to a newspaper. I do love the New York Times, especially the Sunday edition magazine. I’ll shell out $5 for that each week. When I am ready for news on a daily basis, however, I do not open the paper. I browse my RSS Feed.

What is RSS? Click here for a primer.

Google is Great, Google is Good

I use Google’s feed reader, a natural extension of my dependency on Gmail and Google services. Google’s Reader allows me to share interesting stories with friends, to search for my favorite subjects, and to sort my feeds with custom tags.

My Favorite Feeds

Favorite Feeds By Category

Typography Typography Served

Design Inspiration FormFiftyFive

Brand & Identity BrandNew

Upcoming Internet News Mashable

Extensive Resources Smashing Magazine

Cool Dudes My Age HellYeahDude

Inspirational Young Designer Jacob Cass

Chattanooga News Chattarati

Really Simple Syndication, In Conclusion

I hope this serves as inspiration to those of you who are unfamiliar or unenthusiastic about feed readers. My RSS feed is something I look forward to checking each morning, afternoon, evening, and night. It is the future of news delivery. I no longer go out to visit my favorite sites, they come to me.

Album Artwork Facebook Meme

Stephen Bush — Tue, 24 Feb 2009 04:26:36 +0000

As a child, I absolutely loved viewing the artwork and typography contained within a newly purchased CD. When I first learned about Graphic Design as a profession, it was the desire to design album artwork that interested me. Within the past week I have been sucked into a Facebook meme revolving around album art creation.

The Meme

This is a fun way to waste 5-10 minutes (or more if you actually want to be creative).

Make your band’s album cover meme:

1 - Go to Wikipedia. Hit “random”
or click http://en.wikipedia.org/wiki/Special:Random
The first random Wikipedia article you get is the name of your band.

2 - Go to Quotations Page and select “random quotations”
or click http://www.quotationspage.com/random.php3
The last four or five words of the very last quote on the page is the title of your first album.

3 - Go to Flickr and click on “explore the last seven days”
or click http://www.flickr.com/explore/interesting/7days
Third picture, no matter what it is, will be your album cover.

4 - Use Photoshop or similar to put it all together.

5 - Post it to FB with this text in the “caption” or “comment” and TAG the friends you want to join in.

The Results

I found it incredibly fun to sit down and design just for the sake of designing. This meme afforded me the chance to play with type, make some outlandish design decisions, and distract myself from impending deadlines. Posting the items to a Facebook group dedicated to these memes made the experience all the more enjoyable.

My First. I’m starting to believe that nearly anything looks good with Gotham. Gotham + Breasts is a natural extension of this idea.

Like an old Gospel group at Christmas time. Or The Sound of Music. On this one I wanted to achieve the vintage record look inspired by Mat Turner.

I found it really difficult to apply text to the beautiful Flickr image I got on this one. So I masked it and applied some nasty drop shadow for kicks. Reminds me of that Youtube video.. "Because it's fun, it's fun to do bad things."

Cooper Black is an awesome typeface. It’s one I wish I could use more.

I used some whack typeface made out of images of sponges.. toyed with hue to create rainbow gradients, and made a cute sticker. Lazar Zakind is a chess badass. Grilled Cheese FTW!

Grilled Cheese FTW. Seriously, what can I say after that?

Enjoying the Tumblr

Stephen Bush — Tue, 17 Feb 2009 16:58:45 +0000

A New Blog

I recently set up my own Tumblr account. I like Tumblr as a way to connect and share with friends. Not only does Tumblr make it easy to share interesting links, images, quotes, conversations, and videos, it also imports my latest Tweets and Diggs.

Easier to Use

As a web designer and developer, I must use and test social media platforms. After trying many, Tumblr stands out above the rest. Rather than producing lengthy blog posts, Tumblr enables users to quickly share the best of the Internet. Trey Piepmeier, Nashville-based web developer says,

“Tumblr is one of the most enjoyable platforms for both development and everyday use. Easy enough that you actually use it.”

View Trey’s Tumblog. Also check out some of these other fantastic sites built on Tumblr: Brokers With Hands on Their Faces Blog, Laser Portraits, and Mashable.

The Tumblr Dash

The Tumblr Dash is simple, intuitive, and a pleasure to use. Further, customizing the look and feel of your Tumblr blog is easy. You can implement preset Tumblr themes and then customize your HTML and CSS easily. The Tumblr interface makes layout customization a pleasure. It’s hard to put into words just how much I like this service.

Make Your Own

Go ahead. Visit Tumblr and set up your own account. You may be surprised at just great the service is.

Further Reading

Creators of Tumblr

Video detailing new Tumblr features

A Showcase of Great Tumblr Themes

A List of the Best Tumblogs

SXSWi Prep: Business Cards

Stephen Bush — Mon, 16 Feb 2009 00:17:42 +0000

Designing Business Cards

In preparing for South by Southwest Interactive in March, I am working to polish my professional image. It is important that I have business cards ready to hand out to the exciting people I will meet. In creating these cards, I originally looked back to my busines cards created in Professional Prep class last Spring.

The Old

These are three of a series of five color combinations of business cards. The color combinations were rather wild, using bright and neon colors in jarring combinations. I think the largest influences on their design was my recent trip to NYC and the amount of early ’90s Hip Hop I was listening to each day.The logo was designed during this assignment, built on the triangular grid clearly indicated on these cards.

The New

The new card is consistent with the branding of my website: gray tones and a bright orange, using Akzidenz Grotesk. On the whole the redesigned cards are intended to be simpler, cleaner, and sharper. I am still using the same logomark because I like the angularity and the grid it is built upon.

The Real Deal

I ordered the cards through an online vendor, Uprinting. The process of ordering was easy, I needed to prep the standard-sized cards with a bleed at 300dpi jpeg format. Simple enough. Business cards will make a great addition to my personal brand and my ability to market myself. Look out, SXSWi.