I’m pumped to announce availability of Rock Show 2.0.  This is the first version of Rock Show that works on the iPad and both the iPhone and iPod Touch.  A lot of fixes and tweaks are in this version of the application, along with some new posters as well!

Two articles are up about the release, Padgadget is hosting one item and a second can be found at IntoMobile.  For a full low-down and updated info on the app, visit its page: http://www.rockshow.fm

Dynamically built webpages, (especially applications), require time to load and visual feedback that something is happening.  The most famous example is the gmail loading page:

Gmail uses a more sophisticated progress bar to represent the loading of the webpage.  I found an article on yensDesign that gives some great advice on how to do this, if you want to get really fancy.

If you have a dynamically built page that you’d like to give a loading message to that doesn’t require a full progress bar, I recommend simply displaying a message and an animated gif.

The Method

The trick to accomplishing this is a small mix of JavaScript and CSS.  You don’t have to be using <div>’s to display your content, but you should.  My example uses <div>’s.

Let’s begin by assuming you have the majority of your page’s content within a series of nested DIV’s, where the outermost DIV is called “container.”

 <div id="container">
    <div id="heading">
       ...heading content...
     </div>
     <div id="body">
       ...body content...
     </div>
  </div>

Normally, the dynamic content in your container would be rendered by the browser after it has downloaded and performed the main JavaScript routines.  What we want to do is hide the container when the page is first loaded and instead display a DIV that contains a waiting message and a little animated gif icon.

Begin by using the CSS display property to hide the container DIV like so:

  <div id="container" style="display:none">

Next, you need to add a new DIV that contains your “Please Wait, loading…” message.  I chose to include an animated gif icon of a twirling circle, which I easily created using the AjaxLoad.info, a site created by Catherine Roman.   If you want to download my animated loading gif, you can get it here.

Here is an additional set of nested DIV’s that contain the loading content.  This should be placed outside the container DIV:

      <div id='siteLoader'> 
        <div id='siteDetailLoader'> 
        <img src='/path/to/your/animated/gif/loading.gif' border='0'> 
        Please wait while the page loads...<br /> <br /> 
        </div> 
      </div> 

You’ll note that the display property is not set on siteLoader because it is visible by default.  This is what we want.  The trick now is to make the siteLoader DIV dissappear once the dynamic page content is done loading while simultaneously displaying the container DIV with the real page content.

This is handled using the global event handler onLoad.  There a few ways to make use of the onLoad event, I recommend including an external JavaScript file.  Do this by saving a new text file called actions.js in the same directory as the page you’re changing.  Just after your <title> tag on your document include this external JavaScript  file using:

<script src=”actions.js” type=”text/javascript”></script>

Inside actions.js, you need to include a function based on window.onload as follows:

window.onload = function() {
   document.getElementById("siteLoader").style.display = "none";
   document.getElementById("container").style.display = "block";
}

What this is doing is saying to the browser, “as soon as you’re done loading the webpage, you should hide the ‘please wait’ stuff and show the meat and potatos of my webpage.”

To view all of this in action, have a look at my recently updated online portfolio which of course, talks up what a great person I am.  I hope this has been helpful, as always–please post your comments!

For further reading on busy indicators and the important visual feedback and attention cueing needed to be successful with the display of heavy dynamic webpages, have a look at the article series on SAP Design Guild by Gerd Waloszek called “Waiting at the Computer: Busy Indicators and System Feedback.”   There is a wonderful table giving guidelines on the type of feedback that should be displayed based on user wait time.

I struggled with April’s song of the month, “Gifted,” which appears on the album  Spirit of Apollo by N.A.S.A.  N.A.S.A (North America / South America) is a project of Sam Spiegel aka Squeak E. Clean and  Brazilian DJ Zego spent five years assembling a gang of artists spilling across genres.

Performers on this record include:  George Clinton, David Byrne, Cee-Lo, Seu Jorge, Sean Lennon, RHCP, Tom Waits, Ol’ Dirty, RZA, Method Man, oh and Kanye West.

The struggle with choosing “Gifted” was that Kanye is on the track.  I was into Kanye before he failed his Bonnaroo performance so miserably in 2008.  Since then, I’ve felt the inclination to leave a room where his music is playing at a party.

Then South Park came and swatted Kanye down this past week.  It was a public thrashing that no one else could deliver, because he admitted to bad behavior and said “I need to just get past myself.  Drop the bravado and just make dope product.”

Speaking of the astounding effect of animation, the music video forGifted is an awesome work by Three Legged Legs.  Done in just three weeks, they put together a story of a crashlanded spaceman stuck on a deserted planet.  It has a sort of a Heavy Metal feel only scarier.  A full writeup on the video is available on their website.  They also have a full HD version available for download.

Congrats to everyone who went into creating Gifted and for Kanye for just barely not screwing it up for everyone.

As you might guess I’ve been following the redesign of Facebook pretty closely. My pal Bryan just posted a link to another great PC World article on Facebook “caving” to user concerns in the redesign. The article contains a good summary but also some important links worth checking out:

• Facebook’s Director of Product, Chris Cox official reaction (blog entry)
• Techcrunch shames Facebook for caving to users.
• The idea that while 2 million users complained about the redesign, yet that is only 1% of the userbase is highlighted here.

The main changes they will be making in the near term to satisfy complaints are:

• Live updating: One of the most common requests is the ability to see your stream update automatically. We will be adding the ability to turn on auto updating in the near future so you no longer need to refresh the page.
• Photo tags: In order to surface more photos you might like to see, we’ll be adding photos tagged of your friends to the stream. This will happen in the coming weeks.
• More choices for applications: We’ve heard feedback that there is a lot of application content appearing in the stream. We will be giving you tools to control and reduce application content that your friends share into your stream.

I have a theory that the live updates thing was supposed to be introduced at the same time as the major feed update.  I had actually personally contacted FB with my dissatisfaction resulting from having people’s favorite color thrust upon me.

I think that what the new design will receive a more favorable response once the manual page refresh is gone–especially with the this new icon based format.

I suspect that the design team / Zuckerberg felt it would be too much change at once and instead left off the auto-refresh stuff. This half-leap caused a lot of concern because it didn’t incorporate the full concept behind the redesign.

I have another theory regarding the sudden forced inclusion of friends’ application updates:

Application developers suffered greatly when the apps were moved from a person’s profile to the Boxes tab. I know because my own DMB FB app with 9000+ users took a major dive in traffic after the change.  I think that the forced inclusion of app updates in the retooling was meant to try and return the favor to app developers. Unfortunately, announcements from apps seem to be dominated by rather niche trivial quiz that no one cares about.

One of my tasks with the release of our recently submitted iPhone application, TipTotaler was to select an icon for our app.  As you may be aware from Apple’s iPhone application submission guidelines, you must include a flat 57 x 57 pixel and 512 x 512 pixel image for use on the iPhone and iPod Touch home screen and for the iTunes store.

There are a couple of challenges for iPhone Application icon graphic designers:  First, it isn’t always easy to tell what will look good at both 512×512 and 57×57.  Second, having the developer rebuild and send updated screenshots is laborious as is monkeying around in Photoshop to eyeball how the images look at lower resolution with 3D effects.

In order to speed up the process, I put together an Adobe Photoshop macro aka ‘action’ that will quickly take any square image and apply similar 3D effects that Apple uses.  The 3D effects used on buttons on the iPhone home screen and the iTunes store application pages include rounded corners and a light sheen over rounded across the top third to one half of the button.  My macro automatically transforms any image into a 3D iPhone Application icon with these characteristics.

I’ve recorded a screen cast demonstration of how to use the macro using Jing.  You can view the screencast here.  Click the link below to download a zip file containing the Photoshop action macro and iPhone gallery image to test out your 3D button on.

Remember, your starting image must be a perfect square of any size prior to running the macro.  Questions? Watch the screencast above or post a comment.

->  Download iPhone Application Icon Preview Macro

Anyhow, three cheers for Saul Williams and his management for connecting with Musicane on the pre-order of his new album Niggy Tardust. (Yes, that is a racially charged album title. This guy has some pretty serious stuff to say to you.)

Musicane’s system for doing the pre-order was the slickest I’ve seen yet, offering a pre-order download of the 192kbps version for free or you could pay $5 and have access to 192kbps, 300kbps, or FLAC. I paid the $5 and it was worth it!

I received the notification email with the special link to download the new album this evening and once I arrived at the site it gave me an easy download of the FLAC which came to nearly 500 megs. Inside the Zip package was a folder with the album name on it, the album in FLAC, a cuesheet cue file to burn the disc, a playlist m3u file, a high res version of the album cover and a high-res version of the thirteen page booklet for the album in pdf!

Plus, I had all of the tunes in lossless. I fired up FLAC frontend and went to work getting the mp3′s into my library for my junky Zune.

Anyhow, I have to commend Saul Williams for hooking up with whoever coached him into this. Whoever put this digital download package together understands what music fans want and understands the technology through and through.

The difference is clear. Musicane and Saul Williams know the future of music. Radiohead’s management knows how to get a lot hype and deliver a crappy digital deliverable.

I had a professor ask me for more information on what made OiNK special and what it was all about. I assembled the following information for him:

Why Oink Was Special

• The community was very tightly controlled:
  • Only albums that had a certain level of audio quality (192kbps+) were allowed to be uploaded. Albums had to fit a stringent set of criteria such as being original rips from real CDs, and not “transcodes.” A transcode is a song that has been ripped to mp3, decoded back to wav, and then re-encoded to an mp3. This was despite the fact that many feel double compression is not noticeable to the ear.
  • All torrents had to fulfill certain basic requirements such as a complete tracklisting. A basic description, accurate meta data, cover art scans and a playlist file were highly encouraged and more often than not taken care of by the uploader.
• The community was self-policing and highly active. Torrents of albums were uploaded weeks sometimes months in advance of their official date. High profile albums were combed over very quickly and rejected if either they appeared to be transcodes or had been doctored in any way.
  
• It was membership by invitation only, yet had over 150,000 active users. People would lose their accounts for not maintaining a certain upload/download ratio or for not logging in for multiple weeks at a time. Second chances were not given. Donations were accepted but not required.
• OiNK featured a carefully constructed album request and fulfillment system that allowed members to vote for their most desired albums released or not. When a request was filled, everyone who had voted for it received notification that it was available for download.
• When Radiohead finally released In Rainbows, it did so 160kbps which did not meet the existing standard of 192kbps. OiNK community members refused to allow a torrent to be uploaded. The hype for this album was beyond anything the web has seen before yet the site stood by its principles and exercised an astounding level of self-control. Honor among thieves.
• Most importantly, people on there were music fanatics. There was constant demand for albums to be posted in “lossless” audio quality and a thriving discussion forum. Unknown bands repeatedly made it into the daily Top 10 of the past day getting hundreds of downloads before dropping out, while big releases would get tens of thousands of downloads and sit in the popular charts for weeks or months. Just about any album you wanted could be downloaded within a few minutes over broadband and was virtually guaranteed to be perfectly packaged and in astounding quality.

The administrator of the site had his home raided at the same time as the Dutch ISP where the OiNK server was located one week ago today. Here is the Reuters story on the closure .

It is hard to say how this has significantly changed how people listen to music. Without question there are tens of thousands of people scattered across the world who saw and took part in what it really meant to share a music experience today. It made the original Napster look like a playground and illustrated that despite iTunes’ successful commercial model it is largely out of touch with how people really want to experience music today.

Update 10/31/07: An incredible interview with Trent Reznor and Saul Williams went up on New York Magazine yesterday. In it Trent discusses OiNK and compares it to iTunes. I also discovered Saul Williams thanks to this interview. Check this quote from Trent out:

“If OiNK cost anything, I would certainly have paid, but there isn’t the equivalent of that in the retail space right now. iTunes kind of feels like Sam Goody to me. I don’t feel cool when I go there. I’m tired of seeing John Mayer’s face pop up. I feel like I’m being hustled when I visit there, and I don’t think their product is that great. DRM, low bit rate, etc.

Amazon has potential, but none of them get around the issue of pre-release leaks. And that’s what’s such a difficult puzzle at the moment. If your favorite band in the world has a leaked record out, do you listen to it or do you not listen to it? People on those boards, they’re grateful for the person that uploaded it — they’re the hero. They’re not stealing it because they’re going to make money off of it; they’re stealing it because they love the band.”

YES! This is a musician who gets it. The only issue I have with his comments are suggesting that Amazon has potential. If Amazon wants to be a player in the music scene, having DRM free deliverables and a great check out is not enough. It has to look cool. Its music sales pages need to be distinctive to the artist and offer an experience that is not the same as buying calculators from their site.

I ran across a flyer for an old Dropkick Murphys / Sex Pistols show and decided it might be a good hack possibility. 

Here’s the original:

Click here for full size 

 And here’s my hack:

Click here for full size 

Interestingly, I did all of the editing in Fireworks.  I would have preferred to use photoshop, but it was not starting at that time.  (Installed CS2, to replace junky old CS1)

Long-story short, I am a sa-weet image editor.  And I’m fun at parties.