Video Redesign on WRP

Recently, I spent a fair amount of time re-organizing my films on WRP. I had a few goals:

1) Bring my site into the 21st Century, so quit using a js script to open a new window to display the movie.

So, how are all the cool kids doing it? YouTube and Vimeo. No thanks, color me old school and not into “insert your video site of choice that displays your video in horrendous quality along with bizillion ads.”

2) Have a common well-thought out format for all films AND forget about trying to create a reference movie that will check for access speed, QT version etc.

3) Add the ability for iPhones/Touch’s to be able to view the films.

First came DVcreators’ DVKitchen. Fantastic! It provided EVERYTHING I could possibly want… for about a day. It is a nice program and it provided a great starting point for what I wanted to do. I highly recommend looking at it. I’ll repeat… it is a GREAT starting point for a video site!

Now I had a nice way of showing my films; cross off #1.

DVKitchen showed me the value of spending a bit of time understanding your bit rate and film quality. One word, SampleLab. Thanks! (again). Using SampleLab as a starting point, I created multiple compression formats in Compressor. This allowed me to determine the ideal combination of film size and viewing quality. I was amazed at the difference between each film. (I’ll create a note regarding H.264 to help explain this one.) Cross off #2.

After much experimentation, with MakeRefMovie from Apple and Quicktime’s Export for the Web command, I decided that a reference movie wasn’t all that. Due to the my inherent difficulty with reference movies and the fact that iPhone-type devices love a vertical format, I decided to create a vertical-oriented iPhone-only website.

Cross off #3.

This is getting more interesting!

Lifehacker – Wider-Screen Kindle Coming Wednesday – Kindle

A couple of stories are out stating that a new e-book reader is coming, either from Amazon or from Apple. I’m interested in the technology because many technical books are available in electronic format and it seems like a shame to burn a lot of paper on a book that will be outdated in 12-18 months.

I also like to convert lengthy reviews (I’m looking at you Ken Stone) to pdf’s and read them offline.

The Kindle 2 almost had me… but if Apple is truly in the hunt than I’m betting they will have nailed “most” of the needs.

Update: Kindle DX

Not bad, if it weren’t for the Apple rumor all over the Web (not even going to try and find a link), I’d buy the DX in a heartbeat. It appears to be perfect for what I’m looking for… an e-book reader. Meaning, I’m not interested in using it to read the latest novels, I want to use it to read Take Control books or O’Reilly’s e-books. Technnology books that will be out of date within 24 months of me killing a few trees by buying the book.

Stop the madness!

Dropshadow, dropshadow

(think Moon shadow, moon shadow)

I wanted to make the site look just a weeeeee bit better. And a dropshadow on the images seemed to be the way to go.

Search the web… uhhhh, that isn’t easy.

Let’s see what Pixelmator can do… uhhhh, that isn’t any easier!

Sigh, let’s fire up Photoshop and flail away.

D’oh! My image is locked, why oh why! More searching… one of two solutions, double click on the layer then click OK or make sure the image is RGB not Indexed. Sigh. That was 30 minutes.

Ok, I think I understand… apply the layer Dropshadow to the image. NOPE! Ain’t happening. Maybe, just maybe I need to make sure my Canvas Size is bigger than my image. D’OH! Yes, that works and it looks quite nice, if I may say so myself.

So my work flow is this:

  1. Open the file and make sure it isn’t locked, either by double clicking on the layer or by ensuring its mode is RGB (as compared to Indexed)
  2. For a 160×120 image, make the Canvas Size about 20px greater on each side. For larger images, then a larger border will be required.
  3. Add a Dropshadow layer, then mess with the params until it looks like what you want. In this case, once I had my first one that looked good, I saved the Style as WRP (then just clicked on this Style for step 3 on subsequent photos).
  4. Flatten image
  5. Save as a new jpg

Voila! A much better looking site!

It’s the little things


Made some changes to the site in an effort to bring it into the 21st Century.
First, I added a drop shadow to all of the images. What a difference it makes!
Details on how in my next post.
Second, I wanted to make sure the tooltip for each image would say “Click on image to play film.” and each image would have a alt tag so it would validate correctly AND when the film played, I wanted to ensure the title in the shadowbox did NOT say “Click on image to play film!”
Details on this one; so Shadowbox has a title attribute; use it to show the title when it is being played. Use the href attribute title for the tooltip AND ensure you have an alt attribute for the img tag.

Like I said “whew!”