Geek & Mild by Sean Sperte

Software So Good ...

… it makes users bend over to use it. (Please, pardon the crude expression.)

John Gruber today published a link to a blog post written by Charles Miller about NewsFire and its [abnormal] activation scheme. In case you’ve not been a reader of Geek & Mild for at least a year, you might need to know that I’ve had a similar experience in dealing with David Watanabe, the creator of NewsFire.

Here’s the issue: in order to activate NewsFire you must enter the email address you used to register the software. In my (and I assume Charles’) case, a commonly-known, public email address. The address is sent and checked with a server somewhere and verified.

This seems like an okay licensing solution since there’s no activation key to lose, no long serial string to save (and possibly lose) and no multi-level order number and registration code process. In fact, activation is so easy it practically encourages the procedure.

The problem, obviously, is security. What if, say, a valid email address is published on a blog whose author is an outspoken proponent of NewsFire and an obvious valid license-holder? You can bet they’ll be problems. (As hard as it is to imagine, there are dishonest people in this world.)

Do you think that’s the fault of the email address owner?

That’s what David thinks. In the tension-filled email conversation that followed my blog post about this subject last year, David explained that I should have used a non-public email address and that his product activation scheme is as secure as its users make it. (He had a hard time even trusting that I was the genuine owner of the email address.)

Ultimately, we got it worked out. It was with great humility and pent-up emotions that I agreed to delete my blog post in exchange for the use of NewsFire using a different, more private email address. To this day, I have a bad taste in my mouth because of the way I was treated as a paid customer.

What I wanted to do was just what Charles is doing – saying good riddance by admitting:

David doesn’t want me as a customer, and given how few rights standard software licences actually grant the purchaser these days, I suspect he has the right to make that decision.

I just couldn’t do that. You see, I’d tried out several alternative RSS readers (and continue to do so even now), none of which fit the bill – none like NewsFire. Whether it be a web-based solution, built-in to a browser, or a feature-laden desktop client, none compliment my lifestyle and computing habits like NewsFire.

In complete contrast to my recent post about bad software ruining the experience, NewsFire’s interface actually creates an experience wherein I willingly swallow my pride and practically beg to continue its use.

16-Apr 2007

Developers, Your Software Doesn’t Work Unless it Does What I Want

We’ve been demoing some new IP-based cameras for two our satellite campuses, Plateau and University. They’re Sony SNC-RZ25N’s, meant for security applications, but work quite well for what we’re intending them for: Low-fidelity interactivity with the pastor/speaker.

The image quality is good, considering the settings and environment they’re set in. They have an 18x optical zoom, as well as an additional 12x digital zoom. They have automatic and manual settings for everything from white balance, to aperture, to pan/tilt/zoom, to codec, to bitrate, etc. I’m really impressed with the features, and quality.

What I’m not impressed with is the software. The cameras are controlled (and viewed) using a web-based interface that relies heavily on proprietary technologies from Microsoft; specifically ActiveX.

Here’s the crux of it. The cameras have two codec modes: JPEG and MPEG. In MPEG mode the video quality is better when using less bandwidth, but requires a PC and Internet Explorer to view and/or control. The viewer and controller load inside an ActiveX object, which cannot be loaded into FireFox or a Mac-based browser apparently.

In order to even view the feed outside IE/PC I have to set the mode to JPEG, which uses more bandwidth, returns a lower frame-rate and quality, and uses Java (via a web-based applet) instead of ActiveX.

For this last Sunday (Easter Sunday) I managed to pull the viewer – only in JPEG mode – into a custom-built page by embedding the Java applet. The result was near the desired effect, as I was able to set a background color and give the feed a label so people could tell which campus it was. (I was also able to embed both feeds into the same page, side-by-side, letting the pastor see both feeds simultaneously.)

I couldn’t embed the DirectX version of the viewer, otherwise all would be good. But it doesn’t matter: The bottom line is that even though these cameras live up to (and even exceed certain) expectations, the software interface doesn’t let me do what I want. In my mind, that’s a deal-breaker.

Developers, your software doesn’t work unless it does what I want.

In this case, all I want is the ability to display the camera feed in an alternate context. Since it’s a web-based viewer, I should, hypothetically, be able to embed the feed in any web page – or, at the very least, be able to customize the interface for displaying in an appropriate context.

It’s amazing to me that Sony shipped this camera in this state. The software is so bad it renders the hardware almost unusable. It’s obvious they didn’t consider such obvious applications as an embedded viewer – otherwise there’d at least be the ability, let alone documentation. Unfortunately, there’s neither, and I can’t help but think Sony wasn’t even concerned about the customers’ needs.

So, again: Developers, it doesn’t matter how long it takes you to create, how great it is, or how many features it includes, your software doesn’t work unless it does what your user wants it to do.

14-Apr 2007

Powering an Audio Archive With ExpressionEngine

One of the most often-asked questions I receive is about how The City Church’s audio archive is powered. It’s easier than you’d expect, but does require a bit of explanation. So, as promised, here’s a look under the hood.

Custom fields and weblog preferences

ExpressionEngine’s weblogs, or “databases” as I’ve labeled them, are much more flexible than a typical two- or three-field weblog. They can have custom fields, and have dozens of settings. I’ve assigned our Audio Archive database a custom field group which, beyond “title” and “URL title”, has an additional 13 fields. They include:

• subtitle
• speaker (a drop-down menu, pre-populated with our pastors’ names)
• speaker_alt (a text field for the speaker name if it’s not listed in the drop-down)
• campus
• servicetime (a drop-down menu)
• servicetime_alt (in case of an alternate service time)
• summary
• fileid
• graphic
• notes
• keywords
• scriptures

Each custom field comes with preference settings for type, formatting, hiding/showing, and instructions. Setting these preferences, I’m able to simplify the publish form as much as possible, but still give some advanced options to the publisher.

In addition to the custom fields, each entry (or “message” in this case) also has date, category, and status assignment(s). The nice thing about using a custom field for the service time is I don’t have to rely on our audio engineers (who do all the archive maintenance) to manually enter the service time in the entry date field – they simply click on the date itself. Also, since entries can have multiple categories assigned to them, a message can appear as a “Sunday Messages” and “Guest Speakers” entry simultaneously.

Speaking of categories, I’ve also set up a custom category group which has almost 30 categories (and sub-categories) for message assignment. They cover areas of ministry as well as special events. A few examples would be: “Sunday Messages”, “City Kids”, “Generation Church”, and “Men’s Ministry.”

The Audio Archive database also has some unique preferences that set it apart as a non-textual-based weblog. For instance, I’ve set the default status to be “closed” so that an entry can be created without it being immediately published and live. This enables an audio engineer to create the entry during a service while the message is being preached, but not have it available until he/she confirms the details of, say, the title or summary.

I’ve also set the database to: 1) disallow trackbacks (and auto-discovery code) in entries; 2) notify me via email of each entry published; 3) not show formatting buttons, author menu or forum topic on the publish page.

Setting up the templates

The fun stuff is in the templates. That’s where the magic happens. When displayed on a webpage, each message entry has links to listen, download, buy, etc.

Here’s an example of a typical archive listing:

1. {exp:weblog:entries weblog="audioarchive" limit="5"}
2. <div class="message">
3. <p><strong><a href="{url_title_path=message}">{title}{if subtitle} ({subtitle}){/if}</a></strong><br />
4. <span>{if speaker != "other"}{speaker}{if:else}{speaker_alt}{/if}</span> {entry_date format="%M %j, %Y"} &bull; {if servicetime != "other"}{servicetime}{if:else}{servicetime_alt}{/if} &bull; {campus}</p>
5. <ul>
6. <li class="listen"><a href="/listen/{entry_id}" onclick="NewWindow(this.href,'Listen','400','150','no');return false">Listen</a></li>
7. <li class="download"><a href="/download.php?file={fileid}.mp3">Download</a></li>
8. <li class="buy"><form name="post" method="post" action="http://www.ewebcart.com/cgi-bin/cart.pl">
9. <!– shopping cart tags here //–>
10. <a href="#"><input type="image" src="http://www.thecity.org/images/spacer.gif" width="16" height="16" name="add" /></a>
11. </form></li>
12. {if notes}<li class="notes"><a href="/pdf/{notes}">Notes</a></li>{/if}
13. <li class="comments"><a href="{url_title_path=message}">{if comment_total >= '2'}{comment_total} Comments{if:elseif comment_total == '1'}{comment_total} Comment{if:else}Add Comment{/if}</a></li>
14. </ul>
15. </div>
16. {/exp:weblog:entries}

This code-block is found on the index page of the audio sub-section. Breaking it down, you can see I’ve wrapped each message in its own div with the class message. Inside the div I use a paragraph for {title} and some meta-info about the message. Notice the use of conditionals for {subtitle}, speaker and servicetime. If, for instance, the publisher gave the message a subtitle, it will appear in parenthesis after the title; if not, nothing will show.

Then (on line 5) comes the unordered list – with links to listen, download, buy, view notes or comment. The markup is pretty simple:

• For the listen link a JavaScript is used to open a new window and call a single-entry template (/message/{entry_id}). The single-entry template is basically just a few EE variables and an embedded MP3.
• The download link utilizes a PHP script that forces the users’ browser to download the file ({fileid}.mp3) instead of load it.
• The buy link is just a submit button inside a form with a bunch of ecommerce tags that pass the message data onto our third-party shopping cart app.
• The notes link only appears if the {notes} field has a value.
• The comments link uses a bunch of conditionals to either display the number of comments or “Add comment”.

When unstyled, this code-block is relatively plain and [arguably] semantic. The only point of contention comes from the use of a transparent GIF for the form submit button. In hindsight I suppose I could’ve just used input type="image", but I was preoccupied in trying to utilize CSS for all images.

Of course, ExpressionEngine has built-in support for XML templates, so serving a podcast is just as simple:

1. {exp:weblog:entries weblog="audioarchive" category="4" orderby="date" sticky="off" limit="10" rdf="off"}
2. <item>
3. <title>{exp:xml_encode}{title}{/exp:xml_encode}{if subtitle} ({exp:xml_encode}{subtitle}{/exp:xml_encode}){/if}</title>
4. <link>{url_title_path=message}</link>
5. <guid isPermaLink="false">{fileid}</guid>
6. <description><![CDATA[{exp:markdown}{if summary}{summary}{if:else}Speaker: {if speaker_alt}{speaker_alt}{if:else}{speaker}{/if} - This message was preached on {entry_date format="%F %j%S"} at the {servicetime} service, at the {campus} Campus. No additional summary available.{/if}{/exp:markdown}]]></description>
7. <dc:date>{entry_date format="%Y-%m-%d"}</dc:date>
8. <!– itunes-specific item tags –>
9. <itunes:author>{if speaker_alt !=''}{speaker_alt}{/if}{if speaker_alt ==''}{speaker}{/if}</itunes:author>
10. <itunes:subtitle>{if summary}{summary}{if:else}Speaker: {if speaker_alt}{speaker_alt}{if:else}{speaker}{/if} - This message was preached on {entry_date format="%F %j%S"} at the {servicetime} service, at the {campus} Campus. No additional summary available.{/if}</itunes:subtitle>
11. <itunes:explicit>no</itunes:explicit>
12. {if keywords}<itunes:keywords>{keywords}</itunes:keywords>{/if}
13. <itunes:summary>{if summary}{summary}{if:else}Speaker: {if speaker_alt}{speaker_alt}{if:else}{speaker}{/if} - This message was preached on {entry_date format="%F %j%S"} at the {servicetime} service, at the {campus} Campus. No additional summary available.{/if}</itunes:summary>
14. <!– end itunes-specific tags –>
15. {exp:feed_enclosures}<a href="http://www.thecity.org/audioarchive/{fileid}.mp3" rel="enclosure">{title}</a>{/exp:feed_enclosures}
16. </item>
17. {/exp:weblog:entries}

… Okay, so it doesn’t look so simple – but with proper code formatting and highlighting it becomes much easier to understand. I won’t go into detail about every line, but I will point out a few key elements.

First, notice the use of <![CDATA[ ... ]]> for the {summary} field. I use it because the field is set with no formatting, allowing me to format on the template-side – in this case, using the Markdown plugin.

Secondly, you can see I’m using a lot of iTunes-specific code. I suppose it goes without saying, but a podcast without these tags will have an uphill battle getting exposure on the iTunes Podcast Directory.

Finally, notice the actual file link is wrapped in {exp:feed_enclosures}. This tag performs some wizardry and somehow quantifies the file’s bit-size and serves a correctly formatted enclosure element. At least, I think that’s what it does.

Maintaining the archives

So with this infrastructure in place, maintenance of the audio archive has been effortless for me. The only thing I need to do is quality control; making sure message details are correct, no weird symbols are used, and the website stays online. I’m completely out of the loop during the process, which (I’ve been told) goes something like this:

1. The message is recorded to a master CD during the service
2. The master CD is then ripped and (quickly) edited for content and equalization
3. The audio file is compressed and encoded as an MP3 (64k kbps, 22.050kHz, mono)
4. The file is uploaded to the server
5. A new entry is created in the audio archive EE database

I’m yawning just thinking about how little I have to do to keep it all going. ExpressionEngine rocks.

2-Apr 2007