A few weeks ago I built a media center PC using Ubuntu 10.04, an old PC and some free open source software. I was able to turn the old pc into a powerful media center without spending a cent. Now that I have used the media center for a while I started to look for new ways to make it useful while trying to spend the least amount of money possible.

One of the first things that I wanted was a remote control. I wanted a remote that would allow me to control Boxee and maybe even the operating system if possible. I did a little research and came across HippoRemote an app that turns your iPhone or iPod touch into a wireless remote using wifi. They have two versions available, a Pro version for $4.99 and an ad supported version for free.

HippoRemote comes with many remote profiles for popular software, like Boxee, Ubuntu, Windows 7, Mac OS X,  Google Chrome, and Windows Media Player classic.  This was great because it allowed me to control Boxee and Ubuntu straight out of the box.

For my media center I use Boxee for my day to day viewing of movies, tv shows and video podcasts. Every once in a while I want to watch a video while coding or surfing the web, and for this I used Ubuntu’s built in movie player called Totem Movie Player.

I looked through all of the profiles that HippoRemote offered and they didn’t have anything for Totem Movie Player. At first I was a little bummed, but then I saw a feature on HippoRemote that made me smile. It was the words “Upload a Profile”. So I went to HippoRemote’s website and found the basic tutorial to create my own profile.

2 hours later after some reading, planning, designing and coding I have created my first HippoRemote Profile. My first profile is for the Totem Movie Player. This profile isn’t 100% finished but I will be continuing to refine the layout and design as time goes on. Even though it is not perfect I wanted others to be able to use it to control their copy of Totem Movie Player.

Download the source code - Totem Media Player – v1.0

Download the profile to your phone –  Totem Media Player – v1.0

Note: You can download this profile to your phone easily by viewing this page on your iPhone and clicking on the link.

Open Sourced – I have shared my source code and design files so that you can take a look and see what I have done and maybe be inspired to create your own profile. If you have any questions please feel free to comment or send me a message on Buzz or Twitter.

Give it a try and let me know what you think.

The Problem – My blog posts and Buzz comments lived on two different worlds:

I found it messy that I would get great comments in Google Buzz that users wouldn’t get while reading on my blog.

Example:

The Solution (Part 1):

At the bottom of each blog post you will now see a new link and icon that says “Buzz Post”. This links to the static Buzz post that gets created as soon as I publish the article on my blog.

Let me know what you think, and be on the look out for the Solution – Part 2 coming soon.

The new features that I am trying to focused on are:

1. Make posts easier to navigate, read and comment
2. Easier ways to share posts with friends and family
3. Ways to link posts to Google Buzz and vice versa
4. Better viewing capability on mobile phones

Areas that I am looking for help:

1. What are things that you like on blogs/websites that make them easier to use, read and post comments.
2. Where do you read posts from blogs? Buzz, Google Reader, Outlook etc?
3. What things do you find important on a blog or website that makes you coming back for more?

Let me know what you think.

Over the past few years that I have been doing freelance work I have come across a handful of tools which allow me to create wireframes,  flow diagrams and general project plans. Most of these tools are free, but tend to give you a limited number of features. April 12th 2010 this has all changed.

Google released a new Google Docs format called “Drawing”. In this drawing tool I am able to easily create wireframes, flow diagrams and other project planning techniques without having to “learn” the tool. Granted this lacks some useful features found in dedicated project planning tools like sticky lines and stock images, but it offers multiple reasons for it to become my new project planning tool.

Here are some of the key benefits to planning web projects with Google Drawing:

• Able to save the wireframes and flow diagrams then import them into other Google Doc files for better project planning.
• Able to share wireframes and flow diagrams easily with clients
• I can collaborate with clients on the fly (Up to 40 people at once)
• I can publish to the web so that my clients can download a large file
• I can save it out to multiple formats: PNG, JPG, SVG and PDF
• Built in snap/align tool

Here is a sample wireframe and flow diagram that I created with just a few minutes of opening the tool for the first time.

Flow Diagram

Wireframe

I feel that there are some great resources out there that guide you to setting up a business but one thing no one teaches you is, how to setup the files on your computer.

Being able to find files quickly as easily is one of the key successes to running a business. Setting up a streamlined work flow has helped me create projects faster, easier and with less stress.

Below I have created a tree diagram that shows the core folder structure we use at Heka Interactive. These folders can change a little to fit a particular client.

• Client or Project Name
• Advertisements
  • Year
    • Month
• Banner Ads
• Documents
  • Year
    • Month
• Logos
  • Current
  • Archived
    • Date
• SEO
  • Year
    • Month
• Website
  • Current
  • Archived
    • Date
• Website Content
  • Year
    • Month
• Website Design
  • Date

Client or Project Name:
This is the root folder with the clients name (if it is one project) or project name if it is dedicated website or project.

Advertisements:
If a client deals with ads being manually added to their website, I keep them separated by the year then the month that we received them. This helps track down an ad easily if we need to look it up again for any reason.

Banner Ads:
This is the location where we keep any banners that we create for a client.

Documents:
This is where we store any documents provided by a client, such as: Request for proposals, Background information, or sitemaps.

Logos:
If a client has a logo or has us create a logo for them we keep them here. We keep the current version in the current folder and any archived versions in the archived folder, separated by the date we archived it.

SEO:
Since Search engine optimization is an on going thing we separate our SEO content by year, and then month. In these folders we keep any keywords, stats that we save from Google Analytics, and any research that we have done for the client.

Website:
We keep working versions of all clients files in the current folder, this allows us to make changes on the fly and then upload them to the server once we feel that the file is ready. Before we upload any file on-line we make sure we have a current back up of that file(s) we are working with. We keep archives of the files by the date we archived them. This makes it possible to have multiple archives so that we can roll-back to any version in case of a problem or change in direction from the client.

Website Content:
We keep all articles, copy, videos and images that a client provides to use that they would like put up on-line to their website. We separate these files by the year, then month that they were provided. We keep the content of the website separate from the website code and design.

Website Design:
We store all website designs (usually PSD’s, Fireworks PNG’s or IIllustartor files) here separated by the date we created them or the date that they were provided to us (we work with multiple graphic designers). This makes it possible to have multiple design revisions and ensures that we are working with the most up to date version.

Summary:
Our folder structure is always evolving and has changed over the years. As my company grows and as we learn more from other people and from ourself, we change the folders to fit our needs. Though our folder structure does change, these core folders remain the same.

I am interested in seeing how other designers and business owners setup their folder structure for their clients. So, if you have a folder structure that you use then please share. I am always looking to learn new ways to keep our files organized.

Note:
I have attached a zip file of the folder structure we use.
Our folder structure usually deals with website designs and development.

The navigation is truly important in every web site, without a clearly defined navigational system your users will be lost and the web site rendered useless.

A far better medium to use as your resource are printed magazines. Magazines all have structural elements which make them easy to use and a joy to read, all while remaining completely transparent to the user. These elements are; Cover page(This tells the readers what they are buying and what the magazine is about), Table of content (This tells the readers where to find the main articles), Articles(the content for the readers to read), and Index(Tells your users where to find the information).

Break down any web site and you will get four(4) basic structural elements that are identical to a magazine in the following ways: the header is the cover page of the magazine, the main navigation is the table of contents, the body are the articles of the magazine and the footer and/or sitemap is the index, closing statements or any legal information.

Making sure that these four(4) elements are included in your web site design will allow your users to feel comfortable and focus in on the reason they came to your website in the first place: The Content.

Each website should also include:
design, typography, and hierarchy.

Posted via email from Andrew’s posterous

Over the years I have collected some artwork and websites that I find inspirational and before these items were only on my computer. This was fine for the first 50-100 pieces but now this stock pile of artwork is into the 800+ items and I needed a easier way to search through them. I needed a way to search by color, layouts and types of artwork.

This past year I started to use Evernote for many things as you can see from my 100 different Evernote uses article.

Since I used Evernote for many things I thought I would give it a chance for my inspirational images. I then started to transfer the images and screenshots, and low and behold it made my inspiration very easy to navigate and use. You can check out the items that I I find as inspiration here: http://www.evernote.com/pub/amaxwell01/inspiration

I try to add a few new items each week so be sure to keep an eye out for any new items.