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
Note: This project is for demonstration and developer community purposes only, to show you what Alight Digital can really do!
The player must have all of the standard YouTube functionality and have the ability to change the player chrome (skin) dynamically, even during playback.
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.
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!
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.
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.
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.
Our efforts in modifying the wavemobilephones store are best described in steps or milestones, as this was a long-term project:
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.
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.
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.
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.
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:
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.
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.