Web Development

These are just a few of the interesting web applications that we have programmed at Alight Digital. We can make your idea a reality with all of the latest web technologies and programming languages.

YouTube standard skin


Chromeless Player Mutliple Skins

youtube-chromeless-player

youtube-chromeless-player-details1

youtube-chromeless-player-details2


YouTube Chromeless Player

Note: This project is for demonstration and developer community purposes only, to show you what Alight Digital can really do!

Objective

To create a custom YouTube player using Google's YouTube JavaScript API.

The player must have all of the standard YouTube functionality and have the ability to change the player chrome (skin) dynamically, even during playback.

Our Solution

Google's YouTube API (Applications Programming Interface) allows you to call up a player object using an HTTP request by passing it special GET parameters.This returns a blank player which can then be controlled clientside by JavaScript API function calls to the YouTube server.

It was our challenge to embed a YouTube player on a web page and then create a plugin using the jQuery JavaScript framework to replace this standard YouTube player with our version of the Chromeless one.

The standard YouTube JavaScript API relies on Adobe Flash so the first thing that our plugin does is to test if Flash is supported (few mobile devices have support for this). If Flash support is available, the plugin takes the YouTube iframe tag and swaps it for our player code.

The player had to work with multiple different iframes, no matter how many were on the page. To allow for this, our jQuery plugin loops through every instance of a YouTube iframe in the DOM and replaces it, returning its respective API object. We also allowed the ability to return a container object for each one, giving the user the ability to fade or slide the new players into view.

We then created the controls using specially designed images combined with jQuery UI, jQuery's dedicated user interface library, which allowed us to create all of the player buttons, volume and scrub sliders and progress and buffer bars.

These controls would be futile without the functions to make them work so the next task was to give each control its corresponding event handler(s) , programming logic and API function call. The functions were then 'bound' to each player object, making each chrome specific to each player.

Once these functions were complete we made sure that we had dynamically updating video information just like YouTube such as current time and duration.

Our player even calls a separate API, the Google YouTube Data API to get the video thumbnail from YouTube and removes it once play is pushed but replaces it at the end just like the real player. It allows you to select the video quality and allows you to pass it a custom link for the logo on the right.

You can control many other aspects of the player, all of which can be found in the developer documentation.

And finally of course, we added the 'change skin' button which changes the CSS class of the player replacing it with the chosen player skin class. Notice that our demo player has light and dark skins, replicas of famous players like BBC's iPlayer and even has a custom blank skin for developers to download and customize the css and images.

The CSS code involved in the player chrome is very intricate and was as complex and integral to the player's look and feel as the jQuery was to its functionality. It was a tough project and we were proud when we cracked it!

This would be ideal for a corporation that wants to push its web experience a step further and have its own custom YouTube player, thereby keeping the company branding but letting YouTube take the bandwidth hit!

Tools

  • jQuery library
  • YouTube Chromeless JavaScript API
  • YouTube Data API
  • SwfObject JavaScript Flash Embed Script
  • jQuery UI extension
  • jQuery Hover Intent Plugin

Download the plugin on GitHub

Read the developer documentation

Check out our live demo

wavemobilephones-com-home-redesign

wavemobilephones-com-home-details2

wavemobilephones-com-checkout-deatils

wavemobilephones-com-categories-details4

wavemobilephones-com-product-details3

Wave Mobile Phones

We took on a large project with a fast moving telecoms e-tailer, wavemobilephones.com with goals to create applications, to sell pay monthly contract mobiles online.

Objectives

We devised a web engine to allow the company to include pay monthly mobiles in their existing e-commerce store (which at the time could only sell pay as you go), the main issue being that a standard web store does not allow passing of complex tariff plans into the checkout system.

Also these extra options require that a special back-end interface be available, to add the tariff plans to each product and display this complex information in a simple table. After extensive research into market leaders such as Phones4u and Carphone Warehouse, we observed that complex filtering functionality, had to be programmed in order for the customer to make their exact choice, with the best user experience.

Our Solution

To respect the security and intellectual properties of the client, we are unable to name all of the tools but with the permission of wavemobilephones.com we are able to give a broad overview.

Firstly, at Alight Digital we do not believe in reinventing the wheel! We checked out the company's existing web store and found it to be one of the leading e-commerce engines. This gave us an excellent MVC framework to begin with!

What is an MVC framework?

For those of you unfamiliar with the term, it is a very efficient programming architecture which in web terms, keeps the database functionality, the coding logic and the graphical interface(our web page) neatly decoupled so that modifying core functionality can be effectively performed in different files whilst preserving the integrity of others.

Back-End Mods.

Our efforts in modifying the wavemobilephones store are best described in steps or milestones, as this was a long-term project:

  1. We extended the database architecture to include extra fields in the product inventory for the complex array of price plans. This involved creating a new installer so that these bespoke fields are created if the company ever moves hosting provider.
  2. We created a new module in the admin area which allows the company to upload a master-table of price plans and allows for the editing and removal of specific plans which constantly change in the mobile sales industry.
  3. We modified the product inventory in the admin area to allow these plans to be added and removed dynamically via AJAX to any product that required them.
  4. We modified the entire checkout system to allow the checkout to behave differently when dealing with a pay monthly plan than it does with a standard pay as you go product or accessory. This was particularly complex because it required the creation of a custom payment gateway to take in all of the detailed customer information necessary to sign up for a phone contract. This needed further database programming to allow different contracts to be displayed with their related phones. The user then had to agree to the contract before the checkout was engaged.

We looked at the whole process as a chain and made sure that the tariff and its respective contract could be passed from the product 'buy' page to the basket, through the checkout to the customer confirmation email and to the company's own order records in the admin area.

Front-End Mods.

With all of this completed, there was still the task of accomplishing all of that tricky filter functionality which most of the competitors had. The three main filters and the technique used for creating them are described below:

  1. The first filter is the "find your deal" filter on the homepage of the site. This allows the user to select a tariff type, a manufacturer and then searches the database with these parameters to return a list of matching mobile phones. The same technique was used to create all of the filters, each time that the user changed one of these dropdowns on the site, an AJAX (Asynchronous JavaScript And XML) request was fired from the event handler and constructed a query string in the controller file which in turn queried the database from the model file.This is described further below.
  2. The second filter was on the inner "category" pages and was constructed so that the customer could refine their search directly from the category page. This time, four variables were in place- tariff type, network, manufacturer and price-per-month. Exactly the same dynamic query string building technique was used and each time the selection was altered, a new AJAX query was fired, generating new results which are animated on the page like a deck of cards shuffling by the jQuery plugin Quicksand for extra visual impact. jQuery was particularly powerful here because we were able to use it to remove the value from each dropdown and pass the correct data to the controller file.
  3. The final and most important filter on the site was the price plan table filter. This was the filter that allows the customer to narrow down the complex price plan choice and match it with exactly what they want in terms of minutes, texts, data, network, etc. After rendering out the available plans from the product in question in a big table, each row of the table had its own html form which allowed us to send, via a standard form POST request, the chosen plan with the product into the checkout.

Check out the live site

css.php