This marketing site for Siemens encourages engineers to take a series of 5 challenges against the clock to prove their cognitive skills.
CodeIgniter
The framework was built with CodeIgniter which is a fairly lightweight php framework that allows flexible development of sites quickly within an MVC pattern.
JavaScript
Creating the challenges was the most interesting part of this project. The games had to work on mobile devices and desktops so Flash wasn’t an option. Instead I used a mixture of JavaScript and CSS3.
jQuery UI’s draggable and droppable plugins allow user interaction to be introduced easily while still offering a powerful interface for customising their behaviour. For touch devices, use Touch Punch to make sure that mobile and tablet users can make use of the drag and drop too.
jQuery is only the beginning
jQuery and its associated plugins are powerful, but they are only the start of creating an engaging user experience. At the most basic level, it can be used as a selector engine but a good understanding of object oriented JavaScript is still necessary to create bespoke applications such as this.
3D Transforms
Challenge number four involved some really interesting animated 3D transforms which are all accomplished with CSS3. Getting your head around the different axis as each of the 6 faces rotate is enough to send you loopy.
Don’t forget the fallback
This site uses some cutting edge CSS3 properties like transitions, transforms, 3d transforms and keyframe animation. All of which are supported in the most recent version of popular browsers, but some older browsers will struggle.
Luckily, the modernizr plugin comes to the rescue and adds html classes to the document which can be interrogated to decide which type of effects to attempt. The spinning and folding cube is replaced by a nice 6-frame fade-through animation for browsers which don’t support 3d transforms.
