top photo

Here are the early wireframes outlining user interactions. The next step will be refining user requirements. Since we are incorporating a few existing social services, this will be an important step. I like using Balsamiq for wireframing because the austere look of the wireframes allows me to do them very rapidly and keep my mind open about color and graphics.

Additionally, here is a PDF of a user flow chart: flow chart

soundovertime.com

The Circle of Fifths, which works in a clockwise fashion and is sometimes known as the Cycle of Fifths, explains the relationships between the 12 tones of the chromatic scale. It shows patterns that composers use to write music. The Circle of Fifths is so powerful that anyone without any understanding of music except for the chart below and the relationships it describes could write a beautiful piece of music. Simply explained, any note on the circle is the major fifth of the previous note in the cycle. However there are many other ways to explain the circle. Every casual musician should know it.

The clock works by playing the chord associated with a given note in the circle every hour. C major, generally considered the root of music, is a happy chord and represents 12:00 noon. The rest of the p.m. hours are represented by the rest of the notes that complete the major circle (G = 2, D = 3, and so forth). The A minor chord is more somber and represents midnight. The a.m. hours grow more intense with minor chords leading up to noon/C major.

The half-hours are marked by a I/V cadence, which gives a sense of the day progressing as one long musical piece. The V which finishes most cadences is the chord that will be played at the top of the next hour. 11:30 a.m. is the only half-hour that is not represented by a I/V cadence. This time begins the transition to 12:00 noon and C major, so we need a ii/I cadence here from D minor to C major. Since ii/I is not a very strong resolution, the piece is actually infinite - as infinite as time itself!

This clock can be installed on any computer running Java and connected to a screen. The current time in milliseconds is shown on the bottom right of the clock. This clock is in the proof of concept stage and is currently in development. Hopefully now people will start saying, “Drinks at B major!”, or maybe “B is for beers!”

jberry.net/clock

the clock

the circle of fifths

flickr.com/photos/joshbg2k

The basic idea of the service is that if you want to go to any event in New York, enter the event info and your phone number, and the service checks Craigslist and notifies you as soon as tickets are posted. In fact, it should notify you before the posted is even available on craigslist.org, but Dreamhost plan only allows me to run the cronjob every 10 minutes or more, so you may or may not receive the listing before the rest of the world. If I can get some donations I’ll get hosting with a better cronjob plan. It works like a charm and has helped me get into many events at the last minute including Andrew Bird at Carnegie Hall. There will be some layout changes coming soon, but the system is stable for me. If it’s not stable for you please contact me. It’s open for registration right now, and we’ll cut the list off at about 50 or so for now, so if you want to get in, do it now.

Below are a few screenshots of the iPhone site. The homepage is designed so that all information is accessible right there, without having to load several pages to view About, Instructions, and Contact content. I’m a fairly heavy mobile device user, and what annoys me the most about the mobile web is loading a homepage and having to navigate around the site, often with a dodgy connection, by loading several subsequent pages to find the info that I want. This way I use JavaScript to hide divisions until the user decides to view them.

To implement this, I made two arrays; one to contain the navigation divs, and a second to contain the content divs. Then I wrote a function which takes two parameters (nav button div id, content div id) to manage visibility and highlight the selected button:

// the content divs
var content = new Array('_about', '_instructions', '_contact');
// the navigation divs
var nav = new Array('about', 'instructions', 'contact');

function show_hide_text(_button_content_id, _content_id) {

 var content_id = document.getElementById(_content_id);
 var button_content_id = document.getElementById(_button_content_id);

 for (var i = 0; i < content.length; i++) {

  var content_index = document.getElementById(content[i]);
  var nav_index = document.getElementByIid(nav[i]);

  if ( (content_id == content_index) && (content_id.style.display == 'block') ) {
	content_id.style.display = 'none';
	button_content_id.style.borderBottom = 'none';
  } else if ( (content_id == content_index) && (content_id.style.display == 'none') ) {
	content_id.style.display = 'block';
	button_content_id.style.borderBottom = '2px dotted';
  } else {
	content_index.style.display = 'none';
	nav_index.style.borderBottom = 'none';
  }
 }
}

publk.com/tickets

The user interacts with these screens by either SMS or through the mobile web client, where he/she can send a comment, image, or even video. All text and images are broadcast live on the screens. Images and video are also saved to Flickr for posterity, creating a sort of user generated Last Night’s Party. Everything is shareable via the client; each text comment, image, and video comes with a button to share on Twitter and Facebook. Resulting Facebook posts come with info about the event and location, while tweets are not surprisingly condensed with a link and very brief location information.

This application works very well at live social events. We will continue to install it upon request. However while the screens are fun, the focus will be the native app (iPhone and Android to start). When the user “checks in,” to borrow from Foursquare, we see the native app as an opportunity not only to open this up to any social event anywhere, but to facilitate hyperlocal journalism.

Publk the app is kind of pre-Twitter. Users who see something or report something can instantly post it to their location, and other users can push it out to their own network with their own hashtags. The problem I see with Twitter is that there are so many networks and ways of tagging or identifying information that the whole thing, at least right now, is not cohesive enough to spread news as quickly as possible. It’s just unmanageable. I’ve been on Twitter since the beginning, and I understand the stuff that comes to me because I started with an established network. I don’t have the time to search hashtags, and while Twitter analytics are fascinating, I don’t have any immediate need for them. Even with Tweetdeck, which is great at giving me relevant content, I rarely exit the bounds of my following list. On the other hand however, if i see something that deserves attention I will certainly pass it along. What I and other people need is necessary information to be spread efficiently, and if Publk is executed properly it could be the one to fill the void.

While I’m developing necessary components to the native app, I’ve been pondering the final application and purpose of Publk. What will probably happen is that we’ll develop several versions of it, try it out in various environments, and just chip away the excess until we have what we need. Almost a year of development went into fine tuning this model, and now that we have it there is still so much more before any kind of release.

If you are interested in the live social events application, please see below. Feel free to load up all the pages try it yourself. If the layout of the pages looks a little off on your screen, it’s because this copy was formatted for 1024×768 screens. The pages aren’t much to look at until you interact with them, so feel free to use the mobile web client to send stuff to the live feeds. Leave feedback right there. Also note that any image you send will be saved to Publk’s flickr page. The index page for this application is publk.com/demo. Please be aware that if you visit the client without an iPhone or Android device, you’ll be redirected to our old homepage (new one coming soon). Below are screenshots and links of each component of the social events app. Also, major thanks this holiday season for dynamic image resizing with CSS. (Please note: our users submitted the messages, not the developers!)

publk.com/demo

Mobile Web Client

Live Image Feed

Live Text Feed

Quinoa is some kind of food native to South America that when raw looks like small cous cous, except it’s a plant. When cooked however it looks like sperm or pollywogs or something, because it’s translucent and sprouts a 1/4 or so inch tail. Very odd. It needs to be rinsed clean of its outer layer of starch and simmered for 15 minutes. Very odd.

I sacrificed one of my cans of coconut water to the cooking liquid and added a cinnamon stick, salt, pepper, 1 bay leaf, toasted coriander seeds, some cloves, and reconstituted chanterelle mushrooms. It was sweet, flavorful, and an interesting substitute for the more common partner to pork chops - apple sauce. Interestingly it sort of has the consistency of apple sauce. The recipe possibly could have done without the mushrooms, but whatever, they were good and added texture. Next time I’ll probably try raisins instead of mushrooms.

This is actually one of the better dishes I’ve made in a while, thanks to the quinoa. My diet possibly could have done without the extra chop, but whatever, those were great too.

The quinoa recipe roughly breaks down as:

1 cup quinoa, rinsed
2 cups coconut water with pulp
handful of dried chanterelle mushrooms, reconstituted
pinch of salt, cracked pepper
8 cloves
25 toasted coriander seeds
1 bay leaf
1 cinnamon stick

I believe the web client will be proof of concept that we need before moving onto the app. It will debut at Drink the Tree next week in Boston where we hope to gather all the documentation and user feedback necessary to build a very strong mobile application. The app will contain current functionality as well as some surprise features that will have to remain under lock and key for now.

While it will likely be in development up to next Friday, I encourage you to take a look at the web client on your iPhone or Android device. Like many mobile sites, it looks sort of like junk on a desktop browser, so until I get device detection on it I’ll just have to trust that you won’t look at it on anything but a phone. If you have any suggestions or recommendations, feel free to submit them right in Publk!

publk.com/client