May

24

Almost famous

Filed Under housekeeping | Leave a Comment

I had the pleasure of corresponding with Thord Daniel Hedengren this week and the end result is yours truly is this week’s featured blogger atThord’s excellent Blogger Talks.

Woo!

If you're new here, thanks for stopping by. If you like what you read, you may want to subscribe to my RSS feed. Thanks for visiting!

May

22

How to host and stream your own mp3s with JW media player

Filed Under how-to | Leave a Comment

While using someone else’s media player to stream mp3s hosted on your site can be fun (see the tutorials on how to use the Google Reader player and how to use the Yahoo media player), nothing quite beats the thrill of rolling your own media player and controlling it on your own server. Below are some simple steps anyone can take to use the free jwplayer from Jeroen Wijering.

JW FLV Media Player

The JW FLV Media Player is the brainchild of Jeroen Wijering. It is made with Adobe Flash technology and will play not only flv files but any other media format supported by Flash, including our self-hosted mp3. You can get the jw flv media player up and running with a few simple steps:

  1. Download the source files for the media player from here
  2. Unzip the source files and upload them to your own hosted server. I created a new folder on my account called ‘mediaplayers’ and then created another folder called ‘jwplayer’. Take note of the location of the files as you will need this later.
  3. Go to the jw flv media player setup wizard
  4. The JW Media Player configuration wizardConfigure the wizard as desired.  I’ve included a screenshot of my wizard configuration and I’ve kept it very basic. The wizard lets you do things such as change colour, size, add playlists (if you have those set up already), add a stop button - stacks of features all up.  When you’re finished configuring, click the ‘Update and preview code’ button to see what your player will look like and the code you need to cut and paste into your own site.As a quick explanation, the ’source’ option is where you have uploaded the media player files on your server and the file option is where you have stored your mp3.  Also, the ideal height for the slim player is 20 pixels (the default setting) for a single mp3.  Larger sizes are useful for when you have a playlist of tracks you want to display.
  5. Copy and past the code into your webpage.  As an example, the code generated from my options is:<embed src=”http://techwhimsy.com/mediaplayers/jwplayer/mediaplayer.swf” width=”440″ height=”20″ allowscriptaccess=”always” allowfullscreen=”true” flashvars=”height=20&width=440&file=
    http://techwhimsy.com/31_Ghosts_IV.mp3″ />

Embedded, the final version looks like this: And just to prove how easy it is to change colours etc, here’s another version created with the wizard: If you are having problems with the embed code (for example, the code shows up as standard text in your blog), try removing all the line returns and replacing them with a single space instead. Also, for some reason that escapes me (but you clever bunch out there probably know), you need to have a space between the end of the code and the closing “/>”.

May

12

Yahoo Design Tools: Yahoo’s hidden gem

Filed Under how-to | 2 Comments

yahoo-developer-network

With all the fuss surrounding the will they/won’t they merger of Microsoft and Yahoo, it has been surprising to see just how many cool and interesting things there are buried inside the Yahoo corporation.  There is much more to Yahoo than search, directories, Flickr and del.icio.us.  A quick scan of Yahoo! Everything reveals a whole bunch of stuff from the new social news service Buzz to online video editing with Jumpcut to the Zimbra collaboration and instant messaging service.  However, what is possibly the most interesting to web geeks is the unsung Yahoo User Interface (YUI) and Yahoo Design Pattern Library, both part of the Yahoo Developer Network.

The YUI is a collection of cross-browser controls and utilities written in Javascript that are intended to be used in developing rich internet applications (think AJAX and DHTML).  It is freely available under the BSD licence for anyone to use in commercial applications or otherwise.  Included in the YUI is a collection of Cascading Style Sheets including a comprehensive style sheet providing a large range of different grid design options for page layout.  The YUI has too many cool things to list here, but some of the cooler applications include a rich text editor, calendars and drag and drop utilities.  The YUI is quite a technical collection and is essentially a giant repository of server and client side code.

The Yahoo Design Pattern Library is a practical application of the industrial strength code in the YUI.  The patterns are an attempt to offer comprehensive solutions to a wide-range of interface design problems and pull together different pieces of the YUI code.  There are design patterns for navigation options (things like tabs and indexes), calendars, page layouts and slideshows.  Like the YUI, the Design Pattern Library is free to use by all comers and is licensed under a Creative Commons By Attribution licence.

To keep up to date on new additions to both YUI and the Design Pattern Library, keep your eyes on the Yahoo! User Interface Blog at http://yuiblog.com/blog/

Note: as far as I am aware, no part of techwhimsy.com uses either YUI or the pattern library.  Now that I know they exist, there’s a very good chance some of the features will make their way into techwhimsy v2.0

May

6

Trent Reznor does it again

Filed Under PointOfView, news | Leave a Comment

I’ve got a guest post up at sarahintampa.com (the blog of Grand Effect and ReadWriteWeb writer Sarah Perez) on the new Nine Inch Nails release The Slip and how Trent Reznor continues to lead the way in ‘music 2.0′.

Over the last few months, Sarah has quickly become one of my favourite tech blogger so of course I jumped at the chance to provide this guest post.

NIN does it again. Are you watching, Thom?