»
S
I
D
E
B
A
R
«
Building Your First App: Breaking Down The Controls
30 October 2009 by Rob Spectre
This entry is part 2 of 9 in the series Building Your First App

Last time we created a design of our first Boxee app.  In this second installment of an ongoing instructional series on building that full skin, we are going to take that design and break it down into the individual controls that we are going to use in our app.

For this exercise, we chose to use a “list”-style interface, similar to that used in Auto-Tune The News.  Now we need to take the design we created and break it down into three pieces: a background, a list container and a metadata container.

StoryLineOnline

Background:

The background image control is a static, non-interactive component of the interface that serves as the backdrop for the interactive controls in our app.  Using Storyline as an example, your background should include all the elements that aren’t going to change:

background

List Container:

The list container is the main interactive piece of the application.  For our first app, it will be the list of the videos the user can select to watch.  We pull from our initial design a blue box to serve as the control’s background.

list

Metadata Box:

The metadata box is the part of the interface that – you guessed it – shows the metadata for the video selected in the list container.  Examples of metadata we are going to display are a thumbnail of the video, when it was posted, runtime, title, summary, etc.   While the user will navigate using the list container, the metadata box is where their eyes will spend most of their time.  We also pull out a blue box as the background for this control.

metadata

We save these individual elements as PNGs and get ready to start building the skeleton of our application’s directory structure.

Building Your First App: Designing the Skin
28 October 2009 by Rob Spectre
This entry is part 1 of 9 in the series Building Your First App

The Boxee family grows every month as more and more developers discover how easy it is to get started developing on this social platform for the living room.  Using tools such as Yahoo Pipes and popular scripting libraries for generating feeds, developers can go from zero to a published app in no time using Boxee’s default skin.  Just plug in a RSS feed that conforms to the Boxee spec and Boxee “just works.”

But where Boxee really shines as a development platform is with full skin apps.  A lot of Boxee RSS app developers are intimidated by the Boxee API, believing a strong Python background is necessary to build a full skin app.  However, this is just not the case.  Boxee apps can be as simple or as complex as the individual developer needs them to be with many applications requiring no Python application logic whatsoever to work well.  The XML-driven GUI available for Boxee developers gives you everything you need to take your RSS feed and provide a rich, compelling living room interface.

If you can make an RSS feed, you can make a Boxee skin app.

Last month, I got to work with prolific Boxee developer jendabom on building her first skin app for Boxee.  Together, we were able to take one of her RSS apps (Storyline) and make a full skin with a few emails and a couple afternoons worth of work .  From that correspondence, we’ve developed this series taking you step-by-step through building your first skin app.

The way I attack a new app is first designing the interface in my favorite graphic design suite.  I use GIMP myself (as it is FOSS), but if you have access to something more professional like Photoshop or Paintshop Pro that would be good too.

The goal of this step is to layout the interface you are looking for in individual layers that can then be cut out into individual graphics elements that you will make into Boxee app controls.

Here are a few tips:

  • Set your canvas size to 720p (1280×720).  This will ensure your skin looks good on a variety of displays.
  • We can start by choosing between two basic interface options – List and Panel. An example of a “List” interface would be Auto-Tune The News or The Philip DeFranco Show.  An example of a “Panel” interface would be AL TV or KidMango.  Adjust your UI design to fit each paradigm appropriately.
  • Text over multi-color images == bad.  Try to avoid this pet peeve of Boxee QA.

Here’s an example of what jendabom came up with for Storyline:

StoryLineOnline

It’s Halloween on KidMango
27 October 2009 by Rob Spectre

The crew over at KidMango are celebrating Halloween with a new release of their Gonzee app.  With a new look and feel, the latest version features a special channel of Halloween episodes of your favorite KidMango programs.  The special Halloween release will run until the end of the month.

If you already have installed the KidMango app on Boxee, you will get the new release automatically.  If you’re looking for the best kids content on Boxee, you can install this Halloween special through the Boxee App Box.

This release comes two months after KidMango’s successful launch, where KM CEO Paul Marcum had this to say:

Just wanted to let you know that the Boxee app has streamed over 10K videos since launch.  We’re pretty happy with that number – thanks again for putting it together.

I’ll admit that I’m surprised it’s done that well given the Boxee installed base and our niche appeal.  It was announced on 9/3 and without any promo October is on track to top September’s streams!

Congrats to the KidMango crew for making their app the destination for children’s content on Boxee!

New Release: Boxee + Real-Time Social = Win with Cliqset
13 October 2009 by Rob Spectre

I am dead excited to announce the latest Gonzee app, one I think is a real game-changer in the living room.  Cliqset v1.0 is now available in the App Box to bring the first real-time social experience to your living room.

1) What is Cliqset?

Cliqset is a real-time social media service that unifies your many online identities in one gorgeous interface.  TechCrunch has likened the service to “FriendFeed on steroids,” aggregating more social services than anyone else with a strong emphasis on real-time, instant communication.  Mashable called it “FriendFeed Done Right” with support for more of the online social web and a gorgeous interface to boot. I like to think of it more as the first real lifecasting service, finally combining online a rich aggregation of social services delivered instantly.

Real-time conversations in your living room

Real-time conversations in your living room

2) What is the Cliqset Boxee app?

One of Cliqset’s greatest strengths is its rich API, which is leveraged to bring the Cliqset experience to Boxee.  With this Boxee app, users can view and interact with their Cliqset stream in real-time. Users can see all the status posts from all their friends from the comfort of the living room *and* comment on those activities in real-time.  Whether users are on the web or chatting with gTalk or on their iPhones or watching Boxee on their TVs, Cliqset users can browse and comment on each others posts (in – you guessed it – real-time).

3) What is “Video Chat?”

Here’s the real hot sauce.  The Cliqset Boxee app has an interface for content-aware real-time discussion.  You can watch any video – Internet or local – and participate in a Cliqset discussion about it.  Whether it be The Matrix or The Daily Show or any of the killer apps produced by the Boxee dev community, users can chat with everyone else watching the same content in real-time.  In my limited research, it is the very first content-aware television chat ever.

Content-aware real-time conversations

Content-aware real-time conversations

4) How can I break me off a piece of this tasty goodness?

You can install the Cliqset app from the App Box today.  You can register for Cliqset from within the app and get to real-time conversations for your favorite content in seconds.

It is available for Mac, Linux and Apple TV.

You can read more about the app and Cliqset’s killer desktop client here:

»  Substance: WordPress   »  Style: Ahren Ahimsa
© 2009, all rights reserved.