Friday, July 18, 2008

Don't Make Me Think!

I'm not a Web designer but I decided to Don't Make Me Think! because I could just read and think about the content while traveling. I've found most of the content insightful and this particular bit gives a glimpse of why I like the book.


And the worst thing about the myth of the Average User is that it reinforces the idea that good Web design is largely a matter of figuring out what people like. It's an attractive notion: either pulldowns are good (because most people like them), or they're bad (because most people don't). You should have links to everything in the site on the Home page, or you shouldn't.


Heh - the Average User - I hate it when the Average User comes up at work because it is the same thing: it is the dev / PM / etc. claiming they know what the Average User wants so they can enforce their agenda.


The point is, it's not productive to ask questions like "Do most people like pulldown menus?" The right kind of question to ask is "Does this pulldown, with these items and this wording in this context on this page create a good experience for most people who are likely to use this site?"


Good point - seems like that could apply to the code / end-user issues as well.

Tuesday, July 08, 2008

posting family / hobby videos

We hope to be posting more videos on our blogs in the future, so we need to work out a good process and format for converting and posting the videos. Flash video files are becoming very common and are handled nicely in most browsers (pretty much everything but the iPhone as far as I can tell) so that seems like a good starting point.

SWF or FLV
The Adobe Flash movie player plugin expects SWF files but the FLV files are better for us because they can stream out to the player. The reason to point that out is that if you look at the excellent Adobe documentation for object / embed for the Flash movie player, you only see the movie parameter pointing to an SWF file. I chose a nice looking embeddable FLV player from advanced flash components to be the SWF file that streams / plays the FLV files in the blog posts.

ffmpeg or mencoder
Our camera produces HD videos at 1280x720 pixels and the files are pretty large. I tried 2 different tools to convert the large .mov file to .flv:

ffmpeg:
ffmpeg -i P1010013.MOV -acodec libmp3lame -ab 64k -f flv -b 800000 -r 30 -s 400x225 -aspect 16:9 ravioli.flv

mencoder:
mencoder P1010013.MOV -o ravioli.flv -of lavf -oac mp3lame -lameopts abr:br=56 -ovc lavc -lavcopts \
vcodec=flv:vbitrate=600:mbd=2:mv0:trell:v4mv:keyint=10:cbp:last_pred=3:aspect=16/9 -vf scale=400:225 -srate 22050


I've used ffmpeg more in the past so I intended to use it for this; however, the basic options above resulted in a lot of popping in the resulting .flv file. I started reading about the audio codecs and tried a few different settings but decided to try a basic config for mencoder that I was familiar with. I think that either of the above could be improved: ffmpeg could get audio fixed or mencoder could ensure that the aspect ratio gets coded into the video info.

Preview Image
In the case of the ravioli video, I didn't like the default preview image so I generated a series of jpegs and used MS Paint to scroll through the images until I found one I liked.

mplayer:
mplayer.exe ravioli.flv -nosound -vo jpeg

Embedding the Video
To get the video into a Web page, we just need to invoke the player and tell it what .flv file to use. We currently have the .flv files on our regular blog server; in the future, I'd like those moved to AWS or some similar content network.

object / embed:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
width="400" height="225" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="base" value="/" />
<param name="movie" value="/AFC_EmbedPlayer.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="FlashVars"
value="flvURL=/moo/ravioli.flv&autoHideControls=true&autoStart=false&previewImageURL=/moo/ravioliPreview.jpg" />
<embed base="/" src="/AFC_EmbedPlayer.swf" quality="high" bgcolor="#ffffff"
width="400" height="225" align="middle" allowScriptAccess="sameDomain"
allowFullScreen="true" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
FlashVars="flvURL=/moo/ravioli.flv&autoHideControls=true&autoStart=false&previewImageURL=/moo/ravioliPreview.jpg"></embed>
</object>


References