Using Wimpy with iWeb / MobileMe

Understanding the MobileMe directory structure

Before getting started, be sure you understand the MobileMe directory structure for your MobileMe website. Your iDisk directory structure is set up similar to:

As you can see there are three folders that contain the word "Site", two of which as plural "Sites". This is very confusing. So, just ignore the "Sites" folder that is parralel to the "Web" folder, as we are only interested in the stuff in the "Web" folder. The stuff in the "Web" folder contains all the material on your MobileMe web site.

The MobileMe directory structure for your web site is set up as follows:

The "Sites" and "Site" folder have very similar names, which make things a little confusing.

For ease of explaination, we'll capitalize the plural folder as SITES and leave the singular "Site" folder initial caps.

The Web > SITES folder is the "root" folder for your web site.

- Everything in the Web > SITES folder is accessable with a web browser. This means we can put files and folders into the Web > SITES folder and they will be accessable from the web.

- Everything in the Web > SITES > Site folder is managed by iWeb.

- When you create a new page in iWeb, two things occur:

1. An HTML file is created inside the Web > SITES > Site folder using the title of your page as the "base name".
2. A folder is also created inside the Web > SITES > Site folder using the title of your page as the "base name".

You should see a file named "index.html" in the Web > SITES folder. The index.html file is the "default" or "home" page that is loaded when you visit your site without specifying a file name.

For example, if you enter the following into your browser's address bar:

http://web.me.com/USER_NAME

Then the "index.html" page will load up. HOWEVER, what Apple has done is added some code into the index.html file so that the browser is re-directed to a page (usually the "About_Me.html" page -- or whichever page you've decided to set as your "home page"). If you open the index.html file in a text editor, you find the following:

<meta http-equiv="refresh" content="0;url= Site/About_Me.html" />

The code above is used to re-direct the browser to the page you've designated as your "home page" within iWeb.

So this set up can drive one crazy because it appears as though your "home page" is in the Web > SITES > Site folder and not the Web > SITES folder!

Armed with this information, hopefully you'll have a better understanding of the following:

To use Wimpy with iWeb

1. Create a new folder named "wimpy" on your iDrive within your "SITES" folder:

Web/SITES/wimpy

NOTE: We've capitalized the "SITES" above so that you don't confuse it with the non-plural "Site" folder

NOTE: This folder named "wimpy" will be referred to as your "Wimpy installation folder." You can set the folder name to anything you want, such as "mp3s" or "audio", or "player," we are simply using "wimpy" as the folder name for ease of explanation.

2. Upload the "wimpy.swf", "example.mp3" and the "skins" folder to this newly created Wimpy installation folder.

3. Use the Customizer Tool and set the field titled "Wimpy Installation Folder" to the URL for your site.

Example:

http://web.me.com/MOBILEME_USER_NAME/wimpy

4. Click on the "Playlist Type" drop down menu and select "Embedded (manually enter URLs)"

Enter the URL to the "example.mp3" file that was included in the Wimpy package and uploaded to your Wimpy Installation folder on your iDrive.

Example:

http://web.me.com/MOBILEM_USER_NAME/wimpy/example.mp3

5. Set the URL to the skin you would like to use by adding the following to the Wimpy Installation Folder URL:

[Wimpy Installation Folder] + /skins/skin_itunes.xml

NOTE: Skins are XML files.

Example:

http://web.me.com/MOBILEM_USER_NAME/wimpy/skins/skin_aqua.xml

6. Scroll down to the bottom of the Customizer Tool and click "Download"

7. Save the resulting file to your desktop. Open the resulting "myWimpy.html" file with a web browser (e.g. Safari) to ensure everything works OK.

8. Open the "myWimpy.html" file with a text editor, or from your web browser "view source" to expose the HTML code. (e.g. Right click and choose "View Source" from the menu.)

Select the HTML code beggining with the line that reads:

<!-- START WIMPY PLAYER CODE -->

... and ending with the line that reads:

<!-- END WIMPY PLAYER CODE -->

Copy this code to the clipboard (COMMAND+C or from the main menu Edit > Copy)

9. Launch iWeb and select the page you wish to include Wimpy within. Click on the "Widgets" button and select "HTML Snippet" from the drop down menu.

Paste (COMMAND+V or Edit > Paste) the HTML code into the window.

10. To include more files within the player, upload your MP3 files to your Wimpy folder, then re-use the Customizer Tool and add more items to the "Playlist Type" > Embedded playlist field.

Then repeat steps 8 and 9 to update the HTML code in your iWeb page. Or, you can leverage the XML playlist functionality, which will allow you to simply update an external XML playlist file.