Earth Monkey Productions
I re-purposed some of my templates and the Flash album player to stream music via the internet archive which is where all the music from Earth Monkey is stored.

Also on the Earth Monkey page I have used some CSS3 statements to create the rounded corners and text shadow effect.
I used the following in my CSS script:

Rounded Corners

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Text Shadow

text-shadow: 1px 1px 1px #666666;

Navigation

Also I have now implemented an intelligent navigation system for both the main nav and the footer nav.
It was developed after reading this very insightful tutorial

But rather than apply a class to the li tag, I used an if/else statement to add a span tag around the active menu item. Here’s the script that I used in my embedded navigation template:

<div id="nav-1">
<ul>
<li>{if '{embed:loc}' == 'home'}<a href="{site_url}" ><span>Home</span></a>{if:else}<a href="{site_url}" >Home</a>{/if}</li>
<li>{if '{embed:loc}' == 'bens'}<a href="{site_url}index.php/main-site/albums" ><span>Ben's Music</span></a>{if:else}<a href="{site_url}index.php/main-site/albums" >Ben's Music</a>{/if}</li>
<li>{if '{embed:loc}' == 'em'}<a href="{site_url}index.php/main-site/emalbums" ><span>Earth Monkey</span></a>{if:else}<a href="{site_url}index.php/main-site/emalbums" >Earth Monkey</a>{/if}</li>
<li>{if '{embed:loc}' == 'about'}<a href="{site_url}index.php/main-site/About" ><span>About</span></a>{if:else}<a href="{site_url}index.php/main-site/About" >About</a>{/if}</li>
</ul>
</div>

loc in the above script is the name of a page level variable which is assigned once at the top of each page using the expression engine script:

{assign_variable:gloc="value"}

Where “value” represents the unique name that you specify for the page. In my case I had 4 different names:

• home
• bens
• em
• about

When the main navigation and footer templates are embedded in the page, they are given the name of the page like this:

{embed="main-site/_Navigation" loc="{gloc}"}

In the above expression engine tag, the _Navigation template is given the page name by assigning the variable loc to be equal to gloc, which was declared at the top of the page.
In Expression Engine, once a variable has been declared, it can be included by using the tag parenthesis {variable_name}.

With that all place the _Navigation template then runs a series of if/else statements to determine a match for the current page. If it finds one, then it adds a span tag around the markup, which is then styled differently by CSS.

In the example above you can see in the status bar that the player is retrieving the audio files from an external source as this album is hosted through the net label www.earthmp.com

earthmp.com has over 70 albums available to download and stream and it is possible to add this content to the site by adapting the various files already in place, which suggests that there is a possibility to develop a framework for delivering online media through your own bespoke portal. The RSS functionality within Expression Engine provides access to even more external content.

Anyway, back to the album player -I added the loading and progress bars which I re-purposed from the inline player. The script for these is quite straightforward as it uses the getBytesLoaded() and getBytesTotal() functions of the sound object in Flash to measure a percentage.

The volume slider is a component I downloaded from Flash.net and was easily able to skin it and apply a listener object to register a change in the slider’s position and perform a transformation on the sound object’s volume, based upon it.

Below, is what the whole page looks like in fullscreen mode with the album player popup in place.

I have used Flash in 2 ways; firstly, as an album player that opens in a popup window so that the user can continue to view the site, without interupting the music, while the player takes care of playing the whole album; and secondly, as an inline element on the album page, as part of the tracklist, in which case the Flash element is only concerned with playing that individual track.

Album Player
Considerations:

• The album must open in a new popup window
• The Flash movie must then determine which album to play and then play it

The page has a javascript function to take care of the popup:

<script type="text/javascript">
<!-- Hide from old browsers
function openWin(url) {
var w_left = Math.ceil(screen.width/2-300);
var openWin = window.open(url,"VoteWin","left="+w_left+",top=30,scrollbars=no,menubar=no,height=365,width=515,resizable=yes,toolbar=no,location=no,status=no");
openWin.focus();
}
-->
</script>


The link needed to call this function looks like this:

<a href="javascript:openWin('http://www.site_domain/index.php/Albums/Popout?id=Get Knotted')"....

In the above code, Popout is a page template in Expression Engine which is handed the variable ‘id’ which is the name of the album that Flash will need to play:

Popout?id=Get Knotted

When the popout window is called it retrieves the album name from the url with the php script, <?php $id=$_GET["id"];?>
When the Flash movie is embedded into the page, the album name variable is passed to it by appending the swf file name with the variable, using the php echo function:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="350\">
<param name="movie" value="{site_url}flash/EE-XML-load-test.swf?id=<?php echo $id; ?>" />

When the swf file loads it immediately calls for an XML file from Expression Engine using the actionscript:

var xmlURL:String = "http://site_url/index.php/Albums/Albums_XML/";
XML = new XML();
XML.ignoreWhite = true;
XML.onLoad = Play_Album_Function;
XML.load(xmlURL);

Expression Engine then converts relevant content into XML using the script:

<Playlist>
{exp:weblog:entries weblog="albums" }
<Album Artist="{BandName}" Album="{title}" PictureFile="{AlbumPic}" Tracks="{TrackNames}" Files="{FileNames}" Basepath="{Basepath}" />
{/exp:weblog:entries}
</Playlist>

Flash then constructs a series of arrays based upon the above variables, loading ALL albums data into its memory. The arrays are associated by default through their index reference. It is a rather scenic route to get there, but Flash then searches its album_tile_name array for a match with the id variable it was given through the html markup Flashmovie.swf?id=Get Knotted

Because Expression Engine created both the XML file and the html markup to append the swf file name with the album title to match it to, a match will be assured, as long as Flash successfully loads the XML file.

With that all in place, Flash then goes on to playing the album, and I’m off to do something else. Bye…!

I have added a trailing guitar lead and a cassette which shows the title of the page on it. I am especially pleased with the cassette effect for 2 reasons. Firstly, because I still had a brand new C-90 still in its wrapper (circa 1996)! And secondly because of the technique I used to overlay it on the background. The cassette housing is transparent so I was a bit perplexed as to how to make it fit in to the composition. What I did was print the webpage and then attach the cassette to the printed background, in situ before scanning it into Photoshop. Then when I cut out the cassette the background can be seen through the transparent plastic casing. A bit of CSS positioning and the effect is quite good, even if I do say so myself! (Original scan below):

Another element that I am pleased with is the seamless worn cardboard look for the page background, which can best be seen on the albums list view page:

At the same time that I became doubtful of the grungy look, I was also struggling to find an overall context for the site. I had visions of aggregating RSS feeds from music sites to add content to the site, since it is so easy to do such a thing in Expression Engine.

However, I was drawn back to my intial desire which was to have a modern looking online portal for playing my music, so I eventually decided to keep it simple. I was still doubtful of the grunge look, so I looked for inspiration in old blues album covers (courtesy of google images!). The one that struck my attention was this one:

Image courtesy of http://content.bandzoogle.com/users/fionaboyes/images/content/bluesville_cover.jpg

I liked the simplicity of this design and it harked back to my LP listening days which has been a big influence on the music that I have been part of over the years. So I set about working up a design based upon it. My first attempts to mock this look up resulted in:

This was ok but there something missing! And then it dawned on me that what I needed was a proper backdrop. So I had the idea of making the site appear to be like an old album, on top of a pile of other albums, on a table. Which is what I have be mostly working on, this week!!

Also, this week I have been keen to get the site functioning on my hosting server, rather than on my external hard drive. So I have installed Expression Engine and continued my development from there. As it stands, it now looks like this:

The image above is a screenshot from the homepage using Firefox in fullscreen mode. As you can see the backdrop only really comes into play if the site is viewed using a wide screen monitor. I will be tweaking it, as there are still a few items that I want to add to the table, but for now, that is where I am upto with this project.

It’s the technology behind the functionality of their site; all the carousels and drag and drop functions on the homepage. I’ve just been looking at it and am thoroughly impressed. It just works!

Try it at www.bbc.co.uk/glow/

So what I am doing is having one weblog that stores all the information for the albums (eg Title, Year, Artists, Image, Track list and URLs). The Track list and URL fields are basically a delimited list where the delimiter (the | character) is used by php to seperate out the individual pieces of information).

Eg the field for the tracklist looks like this:

• track title 1|track title 2|track title 3|track title 4| etc.

The Url field looks like this:

• trackfile1.mp3|trackfile2.mp3|trackfile3.mp3|trackfile4.mp3| etc.

I also have another field in the weblog called Basepath which stores the complete URL of the file, up to the folder that the mp3 resides in.

In this way I can use php and an XML template to split out the stored lists (Tracks and URLs)  into arrays which will associate with each other simply because they are both the same length.

For the webpages, the EE template uses the following php function to split the stored data into arrays:

$Tsplit=explode ("|", "{TrackNames}");
$Fsplit=explode ("|", "{FileNames}");

Where $T is the field of Track names and $F is he field of Filenames…

Flash

I have also been developing the 2 Flash files I need to play the tracks seperately and also an album player that will appear in a popout window.
I have 2 EE templates which generate XML for the Flash files read so that they can play the appropriate file or album….

Lastly for this post I have started to work on a design theme for the site which I am mocking up in Photoshop and Dreamweaver

And now my head is a bit crammed with it all, so I’m going off for a break…. See you next time!

Portableapps.com is a great site with loads of specially designed apps for USB drives. They even give you a whole suite which you can download and install in one go; it also comes with a great interface and autostart feature, so I have now crammed my drive with all the necessary apps I need to be able to develop my assignment, regardless of whether the host computer has the software installed on it or not. Just thought I would share this and if anyone else is setting up a portable USB drive, then I highly recommend they have a look at this site.

Advantages of a portable server

• Your development is not tied to any one particular computer
• You gain a greater understanding of the dynamic web environment by overcoming the problems needed to set it up

Disadvantages of a portable server

• In order for Apache to run, it needs a port to listen to. When you set up a localhost environment on a computer, you only have to configure this once.
• When using a portable server, there is no telling what the host computer will already have as a service listening to the port that Apache has been set up to listen to.
• When there is a port conflict, Apache will not start and you will not be able to use your server environment

What I’ve done

1. I bought a 250GB USB powered Transcend portable hard drive
2. Spent ages reading about how to install a variety of server software onto a USB drive
3. Installed XAMP on to the drive and it worked fine on the laptop in the kitchen
4. It didn’t work however, when I plugged the drive into my main computer in my room. Apache would not start because I had IIS (windows – Internet Information Services) installed and that was causing a port conflict when I tried to start Apache.
5. Spent ages reading up about getting Apache to start.
6. Came across Server2Go which claimed to be a complete WAMP (Windows – Apache – MySQL – PHP) stack environment designed to work from a CD-ROM.
7. So I installed Server2Go and it worked just fine. In fact, I’m completely impressed with it because it means that you can deploy dynamic web applications on CD. However, although I was able to install and run my Expression Engine development project – it caused massive headaches because the Server2Go works using a direct IP address (http://127.0.0.1:4001/) and I concluded that this was not a suitable environment to be able to develop projects.
8. So I read some more about getting XAMP to work and reading through the forum posts I discovered that it was mainly Skype that caused a problem. However in my case it was because I had IIS installed on my computer.
9. So I unistalled IIS and would you believe it, Apache started and I was able to view my project. Everything worked fine apart from the inline Flash player does not seem to be able to play the tracks. I think this might be a security issue within Flash that I will need to address.

All in all, quite a productive weekend! What has left the biggest impression is the Server2Go software which has all sorts of implications. All of these technologies are increasingly allowing a M-V-C (Model – View – Controller) deployment:

• Model – A defined framework in which the project resides
• View – Renders the model into a suitable format for viewing (eg. XHTML and CSS)
• Controller – Is the link between the model and the view and so initiates action within the model, based upon the interaction of the user (eg. user clicks a link, controller decides what to do)

All of this may sound a bit abstract, but basically by developing a project using Expression Engine, it means that the MVC framework is already in place, and flexible enough to allow for bespoke deployments; and coupled with the Server2Go software, you can implement a MVC project on CDs, USB drives etc. Though this post has not mentioned anything about design, it is because I think that a successful MVC project requires very careful thought about the nature of the content and its relationships and granulation, before any mention of how it may look can be addressed. Although inevitably, the two will need to meet!