Scratching An Itch In The (Adobe) Air

Recently I needed to solve a challenge that came up at work. Actually, it was a series of challenges. First, we needed a better way to display our/my videos. Then we needed a better way to submit and review those videos. We also needed a better way to report on how people consume them. It turned out to be quite a big challenge.

In the past, I didn’t think we needed a solution. YouTube provided the answer for everything. YouTube was the primary host for our videos. It just made sense to display our videos on YouTube as well. We also provided links and embeds of those videos on our blog, as well as on some other web properties.

But every now and then, YouTube changed the formatting for its pages. We have minimal control over the look of those pages. And organizing videos is always a challenge. Our customers have a hard time finding the right video because we don’t have a great way to categorize them on the page.

Reporting on video views is a strong point of YouTube, but we can’t easily see what parts of the videos engage viewers the most. I think I know what people enjoy, but I could be wrong. And the YouTube analytics don’t provide me with good enough tools to figure that out.

So we spent a good long time trying to find a better solution. And it’s ended up being one of my big projects at work for the last few months. The result is still in process, but I am pretty happy with where things are going.

For our customers and partners, it starts and ends with a single web property: FaxDocs.tv. FaxDocs is a list of videos that we can easily put into the right categories. And it is completely under our own control. But behind FaxDocs is a site called Wistia which actually hosts our videos.

Wistia isn’t going to be the solution for everyone as it does require payment. But as soon as you outgrow what YouTube provides for free, Wistia is a great next step. With Wistia, we control the video experience. We have access to great reports that show which parts of the videos are the most engaging. And there is another amazing benefit to using Wistia we did not expect at the beginning. Unlike YouTube, Wistia is not blocked by most corporate and international firewalls.

We already see an increase in views around the world. Administrators in companies that block YouTube are watching our videos. Potential customers in China are watching our videos even though YouTube is not accessible. Looking back, this is enough of a benefit to justify the subscription costs to Wistia.

FaxDocs itself is hosted with the massively popular web hosting company called Squarespace. Squarespace provides a great foundation with enough flexibilty for what I wanted to do.

The downside to using a custom platform as it is now is that my system is a bit brittle. I need to post things in a way that is just right. And I need to refer to a set of instructions with every post. I hate that. It was the same with YouTube and the result has been a bit of inconsistency as to how we post videos. So now I am working on the next stage of FaxDocs. I am creating a management app to make it easier to post, get statistics, and more.

I spent a bit of time thinking about the right way to deliver this management app. I cannot build the app just for me. There are others in the organization that need to work with it. I use a Mac, but everyone else is on a Windows PC. I would rather the app not run on an external webhost. Due to the resources available to me, that means it has to be a desktop app. And a desktop app that doesn’t require installing additional wierd services.

So how can I solve all of those needs? It turned out to be a really simple solution. Adobe Air. I have worked with Adobe Air for the last week now and I am really surprised at what it can do. That’s not to say that Air makes absolute sense all the time. I had a few challenges in building my app for Air that I had to overcome. And I am not developing for Adobe Air in the traditional way, so many of the online articles on the topic are not exactly written for me.

What is the traditional way to write an Adobe Air app? As far as I know, it is to use something like Flash Builder. While I do own Adobe Creative Suite 5.5, the version I have is Production Premium. This does not include Flash Builder. But it turns out that you do not need that to build an Adobe Air application.

My Adobe Air development environment involves two main tools. The first, and very important, tool is the free Adobe Air SDK. This includes the compiler and the debug utilities which I use a lot. The second main tool is a text editor. You can use any text editor you like, but at the moment I am totally loving SublimeText 2. If you are new to Sublime, also check out Jeffrey Way’s Tips & Tricks at Nettuts.

I am going to walk through the process for building an Adobe Air app here on Technovangelist. I haven’t written the articles yet, but I would expect the series to take quite a few posts. I hope you’ll stick with me as I write all the posts. If you have any comments, please share them with me below.

How to Create a Custom 404 Page on Squarespace

I just recently switched my blog from a self-hosted Graffiti installation to a completely managed solution on Squarespace. This is fantastic because it takes the job of patching and coding almost completely away. The downside is that some of the things I took for granted are unavailable. Like a custom 404 page. Why is this an issue? Well, if you are moving from one engine to another, they probably have different URLs for the same article. The last thing I want is for one of the rare visitors to my blog is some unhelpful error saying that the page could not be found. If you want an example of this happening, go to Squarespace’s own blog and look at this post from September 2008. Now click on the video link. Unless they have fixed it recently, you will see this:

The built in solution for this is called URL Shortcuts. The idea is that you plug in the old url and the new url into the configuration area, and anytime someone enters the old url, they are sent to the new one instead. Great…if you have 5 pages. But if you have been blogging for a while, then the job of entering those URLs is going to suck. Squarespace probably realizes this which is why you see that screenshot above. So what is the solution?

If you write to support, they will say that URL Shortcuts is the solution. But there is a better way. I found a post on their developer forum about customizing the Page Not Found form. The solution seemed pretty simple. Create a custom 404 page on your site, the paste this in the Extra Header Code section (I am pretty sure this means you need an Advanced level package from them):

<script type="text/javascript">
   //Redirect from error page to your new custom error page 
   var redirectURL = "http://ENTER YOUR NEW ERROR PAGE URL HERE";

   if(document.title == Squarespace.Constants.WEBSITE_TITLE + " - Page Not Found"){ 
      location = redirectURL; 
   }; 
</script>

The only thing to change in that code is the page url. Actually, mine only worked when I put /custom404 rather than http://technovangelist.com/custom404.

On my Custom404 page, I put in some apologetic text explaining the situation, directing visitors to the search box. But I wanted to take it a bit further. I wanted to auto suggest a link for where they really intended to go. It might not work, but I figured it was good to try. On the Graffiti site, page urls were formatted as <site>/<category>/<page>. So I had some that were /technology/blah, and others that were /travel/blah. On the new site, all posts were under blog, so /blog/blah. What I needed was a way to convert all /travel/ and /technology/ to /blog/. I think this would be a good time to tell you that I don’t know anything about javascript other than how to spell Google.com.

A little searching on the net combined with some newbie code wrangling and I ended up with something like this:

prevurl = document.referrer;      
document.write("<font size=-1><b>You came here from "+prevurl+"</b></font>");

So that told me where I came from. When I figured out how to manipulate text I got the rest:

if(prevurl.indexOf("technology")!=-1) {
   newurl= prevurl.replace("technology","blog");
   newurl = newurl.substr(0, newurl.length-1);
   newurl = newurl +".html";
   document.write("<font size=-1><b><br>I think you wanted <a href="+ newurl +">"+ newurl +"</a></b></font>"); }

That combined with my apology was a pretty good first step. Then tonight I realized there was a problem. I looked at my Woopra stats and saw that /custom404 was one of my more popular pages. I couldn’t quickly see which page caused the problem. Woopra shows the page title, which was now “Technovangelist – Custom404”. So I had to change that title. In order to change the title, I needed to pass the bad URL somehow. A query parameter seemed like a good choice. So I changed the line that initialized redirectURL to this.

var redirectURL = "/custom404?ref="+location.href;

That got me the all the info I needed. Perhaps too much information. Now to tweak the title. I headed back to the Extra Header Code in Website Settings. After that first If clause in the script, I added another:

else if (document.title == "Technovangelist - Custom404"){
   document.title = "Technovangelist - 404 - "+location.href;

This is good, but the url in Woopra is now really long. So another edit got me this:

else if (document.title == "Technovangelist - Custom404"){ 
   document.title = "Technovangelist - 404 - "+location.href.substring(67); };

Why is 67 in there? Well, I am sure there is a cooler way, but there are 67 letters in the URL before the unique part of the url. I want to see Technovangelist – 404 - /technology/badsite, not the way too long Technovangelist – 404 – http://technovangelist.com/Custom404?http://technovangelist.com/technology/badsite.

I then added a search box to the custom404 page just in case my guess didn’t work, but I think it’s a good first step. Want to try it? Go to http://technovangelist.com/technology/time-to-move-away-from-graffiti/ and see the custom 404 page that comes up. Now click the link that I suggested. In Woopra I will see something like this:

I am very happy with this solution. Would have been easier I think to be able to override a 404 page, but this will do. Any thoughts on how I can improve this approach??? Let me know in the comments.