labs
The "labs" is a place where we experiment with new ideas and new features. Techniques and code here is not production ready and usually only works on the latest browsers. If you are expecting perfectly neat and well documented code, you may be slightly disappointed!
Fire up a recent version of Chrome, Firefox, Safari or Internet Explorer and enjoy...
Clip Image Demo - Montage of Images retrieved via Google. Change your selection of images using the drop down box at the top, or choose your own theme by typing something into the input box.
Only suitable for latest browser versions, Chrome, Firefox, Safari & IE.
Demonstrates CSS imageclip, Javascript/jQuery, Ajax, DOM manipulation, error-handling. The background is actually pure CSS (not an image) for those browsers that support it.
Framework - This is our latest evening project! An experiment with video and site structure.
A flexible animated site framework. No need to bother the server when you want to see a new page. Ajax makes retrieving pages easy. Preload them or load on demand. Pages can be in a database or separate files. Videos that auto play and pause when you enter and leave a page.
Work in Progress. Lots to be done!
Uses HTML5 video, CSS transitions, jQuery.
Works on latest browser versions and iPad only for now.
Gaga Tweets - Twitter gone gaga!
It's easy to make use of Twitter's API to add a bit of action to your website. This pulls in a live tweet every couple of seconds. I've limited the number of tweets it pulls in otherwise you wouldn't get a chance to read them. Quite why you'd want to read tweets about Lady Gaga is another matter entirely ;-)
Has background video in Chrome, Safari & Firefox
Cards and shapes - iPad demo.
Works on iPad and Webkit browsers such as Chrome & Safari.
Demonstrates HTML5 Canvas element & CSS/jQuery animation. But which objects are canvas bitmaps and which are DOM elements?
SVG is also a really cool technology which has been around for ages, and is now supported by the latest versions of most browsers. Something else we will be experimenting with.
Rectangles - Just to prove you don't need jQuery.
Only suitable for latest browser versions, Chrome, Firefox, Safari & IE.
Pure Javascript is great at manipulating the DOM. Feel free to delve into the code! This needs more work to finish it off. We could add some CSS animations, input validation and other such luxuries with a few spare minutes.
Would like to experiment with creating my own MVC framework, which would totally change the structure of this.
To Do - Yet another "To Do" list.
Why use Backbone when Pure Javascript handles it beautifully. Uses HTML5 LocalStorage to save the items.
Admittedly, it's a pretty crap to do list, but it's just a quick Javascript sample. Feel free to finish it off with a delete button, and whatever else would make it more usuable.
CSS Gradient & Shadows designer
(Currently ONLY works in Chrome v22.)
Want an easy way to design funky buttons? This tool makes it easy to create CSS gradients, shadows and borders and see the effect instantly on screen.
CSS markup is automatically generated so you can cut and paste into your own application.
We will get round to making it cross-browser, but for now, we just wanted a tool that worked. Chrome is currently the only browser to support some new HTML5 goodies that we used, but I'm sure it won't be long before the other browsers include them too.
3D Game Intro - Unity 3D is a great cross-platform tool for creating 3D animations. Click on the "play" buttons within the animation to continue.
If you haven't already got it, your browser will automatically install the Unity plugin (takes just a few seconds).
WordBlitz 3D Game for iPhone/iPad
Something we'd love the time to finish off! This works in most browsers (with the Unity plugin) and we can compile for IOS.
To play, tap the letters to make words and hit the green button at the bottom to submit a word.
You only get 3 minutes to make your mark!
3D Tower Defence Game - Place your gun turrets where they can hit the attacking 'balls".
You may need to place building blocks first to raise the turrets higher.
An innovative twist on an old theme.
This has been designed as a mobile/iPad game and can be compiled to run natively on mobile devices.
Taxi Quote - Get an instant quote for a taxi or other road transportation service.
Just enter the postcode or address and the app does the rest. (work in progress!).
- Auto completion of address, Show start and destination on Map, Calculate price, Show route on map
This really is nowhere near complete!
Mobile Apps
eXtrapol8 HTML Mobile AppOnly optimsed for iPhone and iPad, but will work on any mobile browser.
Scrapes news from various sources and presents them on your mobile device in a totally different format depending on the screen size. Main work is Javascript & CSS.
Compare the difference in look betwen the iPad and iPhone versions. The app auto-senses which of the two and reconfigures the look to suit the screen size.
HTML5 offers a great option for presenting data on mobiles of all types.
HTML5 Scrolling Game Mobile App
Designed as the start of a mobile game - tested on iPad only,
- Smooth Javascript DOM scrolling (not canvas) allows a much bigger world map.
- Pinch to instantly zoom in and out of the map.
- Tap on an existing house to make it move.
- Tap anywhere on the screen to build a new house.
The yellow rectangle on the right can be dragged left which would reveal a command panel or whatever.
Also testing this with a node.js backend, so that multiple players can see the same houses being positioned and moving.
HTML5 - The future of mobile gaming?
WordBlitz - Fast paced original mobile game for your IOS or Android phone.
Monty and the Mugwumps - Stragtegy and determination are needed to complete all the levels in this original mobile game for your IOS or Android phone.