Website portfolio

James Company Karaoke
Picture of the James Company Karaoke website

James Company Karaoke

Date
: August 2008
Www
: www.jamescompanykaraoke.co.uk
Technologies used
  • CSS3

    This would be CSS2.1 if not for the 'opacity' style command used in the gallery

  • Flash

    Flash video used for song videos from YouTube

  • Javascript

    Mouseover quick information boxes

  • MySql

    Database

  • PHP

    Primary programming language

  • XHTML1.1

    Fallback to XHTML1.0 Strict for non-supporting User Agents and XHTML BASIC 1.1 for mobile devices

  • XML

    XML feed requests to YouTube used to show song videos automatically

Problem / Request

The clients original brief was to have a place where they could share information with their customers. Song listing, news articles, a gallery and a diary.

This was left open for me to offer ideas as to what else might be beneficial.

Solution

The clients song list (over 13000 entries in an Excel document), was preloaded into the database using regular expression pattern matching. This was then manually checked to ensure no invalid characters were included for the language specifications we were going to be using. This song list is updateable and editable at any time through the CMS that we designed and wrote specifically for this project.

The initial news section was an obvious first page so it was kept fresh and changing on a regular basis. That way the front page would never look old or the site unused. It was also decided that it would be good to create a mailing list so people could be advised when there was a new article posted.

We suggested to the client that it might be a good idea for the gallery to be added to by the site visitors as well as by themselves and this was the route we finally decided on.

Because of the site visitors adding images to the gallery, and the news mailing list, it was obvious we were going to be dealing with a user based approach. Because of current trends, getting people viewing the site often and the whole web2 'idea', we decided that a 'community' based design would work best.

We added a search facility as looking through pages and pages of track listings would not be a viable idea as an only means to getting track information. This was placed as a very simple single line text entry box on the front page, enabling very quick and easy access to the details pages.

We also enabled the song list to have the artist information accessible so a visitor could look at an artist and see all the tracks available by them. This was later expanded to a genre listing as well so yet another way of finding songs.

Because of the 'community' feel of the site, we allowed visitors to add lyrics to songs if they were missing and to tag the song with genres of their choice. This was designed to increase the usability of the information and to provide visitors with a feeling of having contributed to the site.

We suggested and implemented an automatic and transparent search of YouTube when each song information page is loaded. This enabled any track that had a video matching the song title - artist combination to automatically show (although deliberately not automatically play), a music video. This again was supplemented with a question of whether it was the correct video or if there was no video at all, so users could then also suggest a new video which could then be verified by the client and accepted (hence then showing for that track for everyone else) or rejected.

The gallery grew to enable the tagging of site members within pictures, along with comments and the tagging of which venue the picture was taken at. All of which can be moderated through the CMS.

The diary turned into a calendar that could on its own page, be a complete years worth of coming events. On the front page a select number of months (specified by the client through the back end), show in a side column so visitors have instant access to see where and when events are.

We added to the calendar by enabling the dates when nothing was booked to be linked to a booking page so venues (or private bookings for weddings, parties and such) could easily book events through the site. This also took into account advanced booking notice which is configurable through the CMS. So if the client wanted a 7 day advance on all bookings, nothing within 7 days would have an active booking link.

Venue information was another idea we suggested and went with. This enabled the site to offer venue specific pages which would have information such as which site members go there, when the next events at that venue are, what pictures in the gallery were taken at that venue and a Google maps satellite/street view map to be shown, enabling the visitor to manipulate the map (zoom, scroll, move) so they could get directions.

The maps for the venues when zoomed out far enough will also show the other venues, enabling a visitor to check the other venues that use the client and when.

The member profile pages allow members to add links to their Facebook, MySpace and Bebo pages (these options are all editable and can be added to or removed via the CMS, ready for the next 'big thing' to come along). They also show venues that the member goes to and images from the gallery they have been tagged in and those they have uploaded.

The front page also included the top 10 songs being sung. This information was enabled to be totally up to date and live by allowing the client to update the songs sung and requested immediately after an event. This enabled complete song statistics to also be shown for every track in the catalogue in real time.

Another idea that was implemented was the ability to be at an event and using a mobile phone or other small screen device, access the website to find out song details (look up lyrics) for a song. This enables people attending the events to not have to look through the song books but be able to search instantly for the track details to write on a song slip and hand to the KJ. The small screen rendering is automatic for some devices (phones/PDA's/other) that supply a given command to the server and is manually switchable by choosing a mobile option on any page of the site.

The small screen rendering removes the videos from the track information, the calendar, venue and top 10 from the front page, giving a small and fast data feed to the hand held device, yet allowing full use of every section of the site (exceptions being the video and Google venue maps which are just visual add on's and not actually needed content).