Hidden Messages in Images

There’s a technique called “steganographic encoding” where one hide’s a text message or even a whole file structure inside a seemingly normal image. We’re going to make a simple version of this!

  • First, let’s find an image to use…I chose this self portrait I snapped while RJ was playing around with reactivision.

  • Next, lets decide what we want in our message… for now I’ll just make up some text. I’ll type “This is a secret message” in a text file. You could have a whole set of files if you wanted, just compress them into a zipped folder. Save this file (as a .txt) and the image (as a .jpg) into a folder on your Desktop.

  • Now open a command prompt (Windows 7 & vista just open the start menu and type “cmd” – XP users, just go to start -> run -> then type “cmd”)
  • Change to the directory where your image and text file are stored on your desktop. Issue the command:
  • cd C:UsersOwnerDesktopsecret
  • Type the following: (you must change the file names to your own…I used secret.jpg and secret.txt)
  • copy /B secret.jpg + secret.txt new.jpg

  • Hit enter and the DOS prompt should create a file called new.jpg in the same directory you were working in. The /B you entered above is to copy binary data, which simply copies the text data onto the end of the JPEG image. However, when you open the image, the image header tells your computer to stop reading after the length of the image…thus no one will know that there is more information available.

  • To get the information out of this image, simply change the file extension of the new image to “.txt” instead of “.jpg” and your computer should be able to read the message. In fact, for added security, you could zip the text files up and password protect the directory before copying it.

You can see from the image above that the text “This is a secret message!” didn’t take up very much room in the file, so a user wouldn’t see a different file size. However, I put alot of information in that image, say from this page, then the file size will change significantly. This can tip people off if the filesize of images is not roughly what they expect.

Below is the large image, try and decode it’s message! Simple right click the image, save it to your Desktop and change the file extension to “.txt” or simply open the image in a text editor like notepad++. You should then be able to read the secret message! Have fun…

Motivation Behind the Article:

Recently, the Anonymous group hacked an infamous church organization during a live interview. It’s gotten a lot of press because of the skill and precision with which the attack was carried out. The fact that it was done during a live interview with one of the members of the Anonymous Group conveys a sense that these hackers can effortlessly and reliably take down networks at will. I think it’s sad that the majority of the web population doesn’t have any idea how to do something like this. We’ve recently seen examples of why the lack of fundamental knowledge about hacking is a bad thing. It’s better IMO to be at least cognizant of such things rather than taking the whole “head in the sand” approach. Possessing knowledge about internet infrastructure and how to circumvent it might be the equivalent to our founding fathers’ intent on the right to bear arms.

We’ll be starting off this week with an old trick (from 1985) used to hide messages in seemingly innocuous images. It’s pretty simple, if no one suspects the image of containing a message then information can flow freely without fear of discovery. Suddenly, a person with this skill can communicate freely without fear of censorship. Online, sites like flickr and forums become instant message boards without anyone knowing. In fact, it was suspected that terror groups where using these same channels to communicate back in 2001. However, not everyone who needs to communicate in this way is a terrorist. There are plenty of legitimate reasons for the public to be made aware of this technique. If nothing else,

Creative Brief for Terry Southern

We’re developing a creative brief for one of our clients, Nile Southern (son of the well known writer Terry Southern) and I though it would be helpful to display our process thus far in nailing down something tangible. First off we had a meeting with our client (Nile) to learn about his needs and goals for the project. We then did a “deep dive” into Terry’s work, watching movies, reading books and having literary type discussions. Once we felt we had a firm grasp on Terry’s work and life, we started coming up with key entry points into this story.

The project is transmedia, so there will be a lot of options for communicating with target audiences. Transmedia involves telling a story (could even be self perpetuating, dynamic and ever changing story) through various media channels. There are the standard ways of communicating a marketing message, like print, radio, TV and the internet…but there are more creative and engaging ways to get your message out too. I really like what Trent Resnor did with “dystopia” where he communicated messages through “clues” on everything from government conspiracy to an underground resistance. The whole thing was an integrated game played with NIN fans in order to communicate his ideas and thoughts about what he sees as our inevitable future.

Initially, I had come up with an entry point around some kind of satirical element whether it be a newspaper article or law written to amend our constitution. I respected Terry’s work with satire/hyperbole and wanted to do something along those lines. So I presented a case where we try to get a law passed to amend the constitution for “wallstreeters.” Terry often presented social discourse in his satire often commenting on the current struggles of our society. So I thought it would be interesting to present this entry point as a recently discovered “work” of Terry’s.

The idea was to get a law passed that would “re-classify” wallstreet bankers as “solitary states” thereby deposing these people from all rule of law and allowing them to take full advantage of their elevated positions in life. We would go so far as to take legal argument for the law and promote it as if we actually believed wallstreeters were entitled to this position. The idea stemmed from thought around what Terry might be saying about our society today. What would he have commented on? What would he have despised?

There were more popular presentations and the idea was not well received. So I went back to the drawing board. I read some more work and sketched out a few ideas. I tried to break this whole thing down to one fundamental guideline. What was Terry’s ultimate purpose in writing? It had to be something simple yet elegantly connective. It likely existed in most if not all, his work. Finally, last night I locked in on it.

Terry just wanted truth. He saw mainstream ideas as elaborate hoaxes. He noticed that highly produced works, like those on Broadway were only “representations” of true human emotion but were so commercialized they became sterile. He wrote in 1962 for Glamour about this exact phenomenon in an article entitled The Beautiful-Ugly Art of Lotte Lenya. He drew attention to the difference between a genuine emotion experience and a purely cerebral representation of an experience. He talked about Broadway shows being glamorous and “eventful” but not necessarily realistic. He was interested in how audience had genuine emotional reaction to something and used the Off-Broadway stage collage “Brecht on Brecht” as having the ability to provide that.

Audience actually reacts stronger to a situation that is “believable” and “ugly” than a dolled up and utopianistically contrived example of an emotion. He argued that if people can see the “real” or “truth” in something, they identify with it and have genuine emotional reactions to events surrounding these things. He called Broadway shows “stylized ideals” and thought of “ordinary” as “life in its bedrock essence.” This simple truth exists in many of his works. SGR (Stiff Gook Rimming) for example was an extraordinarily hyperbolic extraction of war…but is it so extra ordinary? Do snipers not tally the numbers of people they’ve killed? Southern simply takes one more step and refers to situations where soldiers take “tokens” of their enemy, much like scalping. There are other examples.

In the file Easy Rider Southern end’s the movie with nothing more than our main character and his companion being brutally murdered for apparently no more reason than a badly thought out joke. Isn’t that how many endings in “reality” happen? Go to the theatre today and try to watch a movie where the audience doesn’t have their way. Often times in life, the hero never emerges from chaos and simply succumbs. I find that more identifiable than a situation where John McClane ends up with a total body count of around 100 people in 8 hours. I find it interested that the top US Army sniper currently on active duty today has only 78 confirmed kills. I’ve seen more deaths than that watching any of the James Bond films.

Therefore, for the creative brief concerning Terry Southern, I propose a campaign around “calling out” the differences between reality and “stylized ideals.” Where could we add discourse around these differences? Maybe a poster in a subway seemingly hanging over the head of a street artist playing music for “tips” that reads “Hero.” Or maybe it’s more like the Dove campaign for “Real Beauty,” showing normal looking people as models to celebrate the ordinary.

How does this help to relaunch the career of Terry Southern? We could hopefully start a movement. Much like what Trent Reznor was doing by calling attention to our own inevitable future, we could call attention to the “true emotional experiences” we are missing by participating in pop culture.

I will bring this idea to the table today in the hope that it will be better received and could possible become the “bedrock” or our up and coming relaunch of Terry Southern’s Career campaign. Either way, I will be writing about the process of creating a brief next time.

Ajax Flickr Widget – WordPress

I recently wanted to have my Flickr photostream displayed in the sidebar of this site. I couldn’t find a simple widget that would display my photostream without having to hack a bunch of CSS to make it match my site, I also needed to photos to load in after site load because it’s a bit heavy on the images. I needed a better solution, so I decided to build my own. The result is almost ready to be released for WordPress as a plugin. Just a few minor cleanup issues.

Basically, it works off the phpflickr library, users fill out a simple form to get started and the module loads the most recent photos in the photostream asynchronously in order to ensure the site’s fastest possible load time.

I thought it might be helpful to quickly review how to write an ajax enable WordPress 3.0+ plugin:

Initialize the Widget:

class Flickr_Gallery extends WP_Widget {
	function Flickr_Gallery() {
		 $widget_ops = array(
		 'classname' => 'flickrgallery',
		 'description' => 'Displays most recent flickr photos from the stream according to a specified username.');
		$control_ops = array(
		 'width' => 250,
		 'height' => 250,
		 'id_base' => 'flickrgallery-widget');

		 $this->WP_Widget('flickrgallery-widget', 'Flickr Gallery', $widget_ops, $control_ops );

Output a form where users can fill in the necessary information:

// produce the form for the widget
function form ($instance) {
$defaults = array('catid' => '1', 'numberposts' => '5');
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
<label for="<?php echo $this->get_field_id('key'); ?>">API Key:</label>
<input type="text" name="<?php echo $this->get_field_name('key') ?>" id="<?php echo $this->get_field_id('key') ?> " value="<?php echo $instance['key'] ?>" size="20"> </p>
<label for="<?php echo $this->get_field_id('secret'); ?>">Secret:</label>
<input type="text" name="<?php echo $this->get_field_name('secret') ?>" id="<?php echo $this->get_field_id('secret') ?> " value="<?php echo $instance['secret'] ?>" size="20"> </p>
<label for="<?php echo $this->get_field_id('username'); ?>">Username:</label>
<input type="text" name="<?php echo $this->get_field_name('username') ?>" id="<?php echo $this->get_field_id('username') ?> " value="<?php echo $instance['username'] ?>" size="20"> </p>
<label for="<?php echo $this->get_field_id('numberphotos'); ?>">Number of Photos per Page:</label>
<select id="<?php echo $this->get_field_id('numberphotos'); ?>" name="<?php echo $this->get_field_name('numberphotos'); ?>">
<?php for ($i=1;$i<=99;$i++) {
$i = $i * 3;
echo '<option value="'.$i.'"';
if ($i==$instance['numberphotos']) echo ' selected="selected"';
echo '>'.$i.'</option>';
} ?>
// produce the form for the widgetfunction form ($instance) {
 $defaults = array('catid' => '1', 'numberposts' => '5');  $instance = wp_parse_args( (array) $instance, $defaults ); ?>
 <p>     <label for="<?php echo $this->get_field_id('key'); ?>">API Key:</label>     <input type="text" name="<?php echo $this->get_field_name('key') ?>" id="<?php echo $this->get_field_id('key') ?> " value="<?php echo $instance['key'] ?>" size="20"> </p>
 <p>     <label for="<?php echo $this->get_field_id('secret'); ?>">Secret:</label>     <input type="text" name="<?php echo $this->get_field_name('secret') ?>" id="<?php echo $this->get_field_id('secret') ?> " value="<?php echo $instance['secret'] ?>" size="20"> </p>    <p>     <label for="<?php echo $this->get_field_id('username'); ?>">Username:</label>     <input type="text" name="<?php echo $this->get_field_name('username') ?>" id="<?php echo $this->get_field_id('username') ?> " value="<?php echo $instance['username'] ?>" size="20"> </p>    <p>   <label for="<?php echo $this->get_field_id('numberphotos'); ?>">Number of Photos per Page:</label>   <select id="<?php echo $this->get_field_id('numberphotos'); ?>" name="<?php echo $this->get_field_name('numberphotos'); ?>">   <?php for ($i=1;$i<=99;$i++) {		$i = $i * 3;        echo '<option value="'.$i.'"';        if ($i==$instance['numberphotos']) echo ' selected="selected"';        echo '>'.$i.'</option>';     } ?>    </select>  </p>

Create a standard "Save" function:

// save the widget
function update ($new_instance, $old_instance) {
$instance = $old_instance;

$instance['numberphotos'] = $new_instance['numberphotos'];
$instance['key'] = $new_instance['key'];
$instance['secret'] = $new_instance['secret'];
$instance['username'] = $new_instance['username'];

return $instance;

Output the widget:

// print the widget
function widget ($args,$instance) {
	$key = $instance['key'];
	$secret = $instance['secret'];
	$username = $instance['username'];
	$numberphotos = $instance['numberphotos'];
	echo $before_widget;
	echo $before_title.$title.$after_title;
	// load in your custom output function below
	echo customeOutputFunction();
	echo $after_widget;

We must also have a function to register the widget with WordPress:

// register the widget
function load_flickr_gallery() {

Finally, add the hook that will register the widget when WordPress loads widgets:

//add_action('widgets_init', 'load_flickr_gallery');
add_action('widgets_init', create_function('', 'return register_widget("Flickr_Gallery");'));

Now, if we want ajax functionality, add:

// Function for handling AJAX requests
function flickr_gallery_handler() {
	// Check that all parameters have been passed
	if ((isset($_GET['mywidget_request']) && ($_GET['mywidget_request'] == 'some_action')) && isset($_GET['page'])) {
		$fpage = (int)$_GET["page"];
		if($fpage < 99){
			echo outputGallery($key, $secret, $username, $numberphotos, $fpage);
		} else {
			echo "The page you requested is too large!";
	} elseif (isset($_GET['mywidget_request']) && ($_GET['mywidget_request'] == 'some_action')) {
		// Otherwise display an error and exit the call
		echo "Error: Unable to display request.";

And add the ajax handler to the init():

// Add the handler to init()
add_action('init', 'flickr_gallery_handler');

Now simply include some sort of ajax script to the front end in order pass the request:

	function ajaxLoadGallery(dest) {
		jQuery("#gallery-container div.page, #gallery-container ul, #gallery-container p").fadeOut();
			type    : "GET",
			url     : "index.php",
			data    : { mywidget_request    : "some_action",
						page : dest
			success : function(response) {
				// do something with the server response here


And your all set!

Feel free to add any other functions outside this class, or inside for that matter, just remember not to violate any WordPress reserved function names you should be able to add any function you want!

Amazing Business Cards

SXSW is coming up sooner that I want it to and in preparation, I’m going to need a lot of business cards. In fact, I don’t just need a business card, I need a BUSINESS card. Something that people say to themselves, “haha, I remember that guy…” and also conveys the “I just don’t feel right throwing this business card away!” emotion.

I checked out a site with some really cool business cards. However, I need something that’s more inline with what I’m trying to convey to the world. So I’ll be stepping through the process of making a business card from design to production. Here are my guidelines:

  1. The card must be interactive
  2. It’s a plus to recycle!
  3. Cheap
  4. Memorable
  5. No disposables (yes I thought of sticks of gum and printing on the wrapper…but people would just toss it)
  6. It has to fit my personality.

So over the next couple of weeks I’ll be documenting my exploration of business cards. Starting with some really great ideas:

Facebook Unfriends

Could you not image a scenario where being able to “dislike” something would actually be helpful? I can. How about PR people? If I have a band and I start wearing fuzzy bunny costumes to all my shows I can immediately get a concrete response on the web. As opposed to getting fewer likes on my site then normal, I might get some dislikes and know for sure that people don’t like my bunny outfits.

That got me wondering what else Facebook isn’t telling us, which led me to “Unfriends” the page where you can actually get an answer about who doesn’t want to be your friend on Facebook anymore! It took me all weekend to build and probably won’t work right for the next few weeks anyway, but it’s done enough for alpha testing anyway.

I’ll do a proper writeup on how it all works tomorrow, but for now, try it out!


Death of the Div

So last night (it was late), there were a bunch of us sitting around after class just talking (we were rather loopy since we’d been sitting at the same table all day). At one point the conversation steers towards the <div> tag, Jon sketches up a sad faced <div> tag and proudly displays it to the rest of us. We all start laughing and a minute later, Jesse comes up with a funny idea for a site, deathofthediv.com.

We all laughed and thought nothing of it, then Jesse buys the domain and issues a proclamation : “Let’s put Jon’s picture up on the site, have terrible music playing and have a place where people can leave their condolences! I have 30 minutes, let’s make this site in 30 minutes and we can’t use any div tags!”

So we get to work. Jon writes up the copy, RJ finds the music, Jesse starts coding up the site, Fouhy makes a background (which we didn’t up using) and I put together the facebook comments app, analytics and favicon.

30 minutes later, this was the result!

Already, there has been a stir about whether or not the div tag is dead or even dying…

It’s my opinion that the div tag is not actually on it’s way out. In fact I think the div will remain a staple of the web development community for at least a couple more years. However, I don’t think it can be contested that with the introduction of HTML5 elements, the div tag is no longer necessary or relevant as the “most used” semantic element. The Death of the div to me, represents a shift in usage from a “go to” element for semantic markup to “peripheral” in its use and usefulness. Already I can see section and article tags being much more useful/clean. However, there’s nothing like a good wrap from the div.

Weigh in at: deathofthediv.com!

Digital Upcycling

Darden (an instructor for BDW and project manager at mondo) brought up an interesting proposal about a week and a half ago. She wanted to do something with digital junk, but recycle it or modify it in a way that makes it more valuable to us than what it was before. She coined the term “Digital Upcycling”. She also gave us a week to produce something on the BDW Wall that would display the essence of what Digital Upcycling means.

After a couple days of brainstorming and tinkering, we were finally ready to put everything together. This timelapse captures part of the process:

Creating an upcycled installation from jesse weaver.

Max created the image and Patrick and Max painted it.

George and I created the hard drive speaker wall to the left.

Jesse, John and RJ created the beat machines that ran the hard drive speakers.

Sean created the little man with the glowing eyes.

Who Do I Want To Be When I Grow Up?

Today in Joe Corr’s class we were asked to pick 3 examples of people who have our dream jobs. I chose:

  1. Chris Coyier – because he’s an expert (or at least considered by many to be an expert) but he’s also an innovator. Over the past 4 years I have been following his site and community as he created it. As Chris learned our community of avid standards based coders learned as well. I chose Chris because he’s managed to transcend a boundary between “really really good” at something and “innovator” or “leader in the field” status. Not that I necessarily want to work with CSS all day or design for that matter, but simply, I would like to become a leader in the field of my choosing, whatever that happens to be.
  2. The guys/gals at Sparkfun. Again I don’t necessarily want to work with just hardware all day. I feel a variety of different technologies mixed with a little strategy would be a good fit for me…but these guys have it good. For one, they work at a small company (that also happens to be very financially stable). Second, some of these people get to play everyday! They come up with cool projects to either build or test and then do it! Who wouldn’t want to go to work everyday and get into something and not notice that they’ve passed by lunch and it’s already the end of the day?
  3. Tim Ferriss. He experiements with what he calls “life design”. Basically he’s just really good at cutting out the bullshit. As a result, he’s amazingly successful at different activities and hobbies he takes on in a relatively short amounts of time. If I had his job, I would be spending most of my time (the other 36 hours/week) innovating in different areas of technology and social entrepreneurship. Specifically, I would help entrepreneurs and potential entrepreneurs make companies in developing countries. I happen to believe, despite popular belief, that the entrepreneur is the central driving engine in building stable economies and by association lifting the poor out of poverty.

Interesting exercise.

Wordle – Beautiful Word Clouds

I love clouds, I love wordle…

When making up my resume…I decided to do a version in wordle just to see how it came out…turned out nicely IMO.

Wordle: resume for mike

I used the following words to describe me.