The game is the result of a competition involving over 600 primary school children. The children turned up armed with ideas & sketches of games they wanted to see built. The winning concept was “Whack a cake”. A game lasts 1 minute and the user has to collect good ingredients to gain points, if you select a bad ingredient you lose points. Each cake has 8 layers and the more cakes you complete the higher your score at the end.

After Multipack Presents, an event held by web designers/developers for other web designers/developers I visited the team down the corridor working on the game. At this time there was about 20 hours left to complete the game before it was demoed. I was soon tasked with building a Universal iPhone & iPad app that would hit the App Store with all proceeds going to Children in Need.

The game itself was built using HTML5 Canvas & Javascript. This alone wouldn’t be accepted in the Apple App Store as it could be visited and played on the website without the app, so I had to add a few extra features to enable it to hopefully get through the App Store approval process. These included sharing options and Game Center intergration. It will be hitting the App Store in the near future to raise money for Children in Need.

Over the past week the game has been covered on BBC Midlands Today & The Guardian. Thanks to Oxygen Accelerator who organized the project & everyone who worked on the game itself over the weekend. A great achievement to all those involved.

You can play Whack a Cake right now on the website. Go give it a try and see if you can beat the high score and don’t forget to donate to Children in Need.

Alex Older, the event organiser, introduced himself to a cinema screen full of developers, designers and students from across the UK and acted as our host for a series of excellent speakers and talks. Here are a few highlights:

Rob Hawkes – Tomorrow’s Web

Rob focused on the topic of Tomorrow’s Web, an inspirational talk about which direction the web may be heading. He kicked off with emphasising the fact that HTML5 and JavaScript are the underlying technologies behind everything related to the future of the web. The fact that major browsers have already adopted these technologies shows that they are here to stay!

Websockets & Real Time Analytics
Perhaps one of the most important and interesting topics covered were the use of WebSockets – a JavaScript API allowing real time communication between a server and a web browser. A major advantage means no more bandwidth heavy AJAX and allows you to push new data to the client as soon as it is ready. This technology could really lend itself to the future of online gaming and Rob gave us a quick demo of his beta multiplayer game; Rawkets.

A more business oriented use of WebSockets currently in use is Gaug.es – a real time website analytics dashboard. Knowing your website statistics in real time could make all of the difference in a competitive business environment.

Device API’s
I can really see the potential of being able to access hardware/OS software API’s using JavaScript. For example, using the Media Capture API as part of a Facebook app, using the webcam to capture some images/video.

I look forward to see what Mozilla come up with with their ‘Boot to Gecko’ [working title] operating system for mobile and tablet devices.

Elliott Kember – Ship It

Elliott’s talk wasn’t much of a talk, but more of a rant and in this case that was by no means a bad thing! He delivered a candid presentation with some very valid arguments and interesting concepts.

The main points that stood out to me (other than the mice and cheese story) was to not be narrow minded when it comes to your chosen programming language, and that experimenting with other languages (regardless of your opinion of them) will most certainly help you improve on the skills in your ‘chosen’ language.

In small projects sometimes a hack just works and if it doesn’t create any real issues then it could well be fine. There will be people that tell you to do it a different way, it’s not massively efficient but in order to get something out there it could be the only realistic option – in order to ‘Ship it’.

Rubber Duck coding – Elliott emphasised the importance of talking things through when something you’ve written isn’t working. The term baffled most people initially but transpired that Elliott suggested getting a rubber duck to talk to in order to run through your broken code – you’ll get to a point where you realise exactly what the problem is.

John O’Nolan – Designing Emotion

John woke us all up after our afternoon break with a loud introduction. His talk focused on the psychology behind User Experience design and the theories behind it. He pointed out the fact that people do not necessarily buy products that are good but buy products that are desirable. For example, the original iPod was overshadowed by it’s peers in terms of specification yet still proved to be the portable music player to have.

A famous quote by Steve Jobs was also mentioned: “Design is not just what it looks like and feels like. Design is how it works.” Backed up with a video of a Swedish experiment by Volkswagen to change people’s decision on taking the stairs (rather than the escalator) by making it more fun and engaging.

Designing emotion can have a huge impact on your customers; “If your customers don’t feel happiness they aren’t coming back, if your customers don’t feel anything they won’t even remember you.”

A third important part to designing emotion is to couple the above with an awesome user/customer experience. Take note of customer complaints – they’re a good thing. Address any issues and the same customer will rave about you.

Further Conclusions

Ben Bodien and Paul Boag highlighted the importance of self maintenance combined with task management to improve your work processes.

Paul Annett showed off an all encompassing task oriented gov.uk website, which will be completed soon.

Looking forward to WDC2012!

Anna kicked off by highlighting how children are being monitored in School. With an ever increasing number of measures in place to track exactly what students are doing on the School network.

“The SchoolBooks were the snitchiest technology of them all, logging every keystroke, watching all the network traffic for suspicious keywords, counting every click, keeping track of every fleeting thought you put out over the net” Excerpt from Little Brother by Cory Doctorow

While I feel some monitoring should be in place for obvious reasons, parents should have the opportunity to give permission to the School to monitor their child’s activity in this manner.

“The time has come for mobiles in schools to be placed in the category of a potentially offensive weapon.” 2007, NASUWT general secretary Chris Keates

To hear that mobile phones are seen as “offensive weapons” and that schools have the power to confiscate, examine data on the device and destroy data is truely shocking. Anna showed an inspiring video of a young South African who described how he had to write his 8,000 word business plan on a Nokia 6234; which just shows how useful having access to devices like mobile phones can be.

Anna then moved onto focus on ICT education in Schools. As mentioned in my last post it has been a few years since I left school and while the curriculum has developed since, the problem with what schools are teaching remains. When I was in school we were using Frontpage Express or Word to build websites, which meant most students at the school would not delve into HTML beyond changing some copy here and there.

“I was flabbergasted to learn that today computer science isn’t even taught as a standard in UK schools.” Eric Schmidt

In 5 years the take-up of GCSE ICT in schools has dropped by 33%. (Source) The Royal Society suggest that the decline in students taking ICT is down to the design & delivery of the ICT curriculum in schools.

Children are taught to use PowerPoint and Word to create websites meaning they don’t see the HTML that makes up the website to ultimately learn the technologies behind the web. Mozilla are running their Hackasaurus program which aims to teach students how the web is built by making them look at the source of websites as well as making them “remix” elements onto their own pages.

Want to help?

I for one have been inspired to do what I can to improve the situation in Schools and have followed some of the steps provided by Anna within her talk to get the ball rolling.

• Register as a STEM ambassador.
• Write to your old school and offer to give a talk about what you do.
• Visit the TES’s ICT teacher forum and give advice.
• Help make open source projects like Hackasaurus better.
• Write to your MP and the Eduction Secretary.
• Sign this recent e-petition to “Teach our kids to code“.

In an interesting development since the talk at updateConf it has been announced on Twitter that David Willetts has announced a pilot programme to teach schoolchildren coding & to develop a programming GCSE.

A Barcamp “#codingforkids” is also being held in London next month with a plan to discuss and debate the topic. You can find details about the barcamp here.

See Anna’s “The Digital Native” slides here.

Unusability

To kick things off Matt Gemmell (or his evil twin) talked about Usability by giving us his “Inhuman interface guidelines”.

1. More is better.
2. Be useless.
3. Celebrate stupidity.
4. Do it your way.
5. Not found.
6. Boxed in.
7. Speak English.
8. Signted users only.

I’m sure if Matt Gemmell (and not his evil twin) had presented the talk you could take away the following points.

1. Do less
The old “Keep it simple, stupid” applied here. Don’t pack features into your app for the sake of it. Quality not quantity.

2. Be useful
Pack in useful functionality, consider how & where people are going to use your app.

3. Don’t be antisocial
Use social media to share information from your app but don’t use the worst features from social media websites to do so.

4. Support orientations
Allow the user to use the app how they wish. Don’t fix the user to use a single orientation it is their device.

5. Consider data retrieval
Make it easy for the user to find information easily, don’t hide information in hard to reach places.

6. Layout for ease
Use native UI elements which the user is familiar with, ergonomics is not only for the device but for the software as well.

7. Localise
If your app is going to be used in other countries localise the app, make it easy for people who don’t have English as their first language.

8. Be accessible
Ensure text is big enough to be read by people who may be visually impaired. Use native controls to ensure screen readers and the devices OS can employ its own accessability features without problems.

Corona hacking session

Seb Lee-Delisle performed some “Live Coding” and built a Angry Birds clone using a mobile development platform for iOS and Andriod called Corona. Within 30 minutes Seb had a ball knocking over a structure made up of blocks using the built in physics engine.

Seb got the audience involved in debugging the code and various members of the audience were following along creating their own clone during the talk. Corona itself looks like a great platform to base games off, it being simple enough to build a part of a Angry Birds clone in just over 30 minutes.

With the audience joining in to debug the code as well as many members of the audience following along creating their own clone the talk grabbed the attention of a fair few developers. Speaking to a few people after the talk everyone wanted to download Corona and build a game right there and then.

The Digital Native

Anna Debenham presented “The Digital Native” highlighting problems with the current model of teaching students. Being only a few years since I left school this is a topic I am all to familiar with and deserves a completely separate blog post, which will follow soon.

Thanks to Aral Balkan, Team Update and all the speakers for putting on such a good conference. Definitely worth a visit next year.

This post is aimed towards graduates that are looking to pursue a career as a web developer, with a few pointers to help you along your way.

The degree that I undertook offered many routes in terms on career choice; web, radio or TV. I chose to go down the web route, specifically as a web developer as I enjoyed the ASP and Flash modules (my final year project was to create a Flash based VLE with an ASP back end – that coincidently lead on to me working as a Flash based eLearning Developer, within the Knowledge Centre of BCU).

In contrast 3 years later, I’m now working as a lead developer here at 383 Project, specialising in PHP, MySQL and Actionscript. In that time I’ve picked up new skills and learnt new languages. University taught me how to acquire and understand knowledge, not necessarily the subject matter itself. Below are some pointers as to the skills that will make you stand out amongst other graduates and ultimately better yourself as a developer:

Read

Never underestimate the power of reading and gaining knowledge, even if this isn’t directly in your subject field. Set yourself up with a Google Reader account and add some tech feeds. Also Subscribe to a service such as Instapaper, and collect articles and posts to read at a later date.

Connect

Find a local meetup group and connect with other like minded developers. If you are in the Birmingham area, come along to HydraHack. This meetup isn’t specific to a particular language and is a great way to discuss general development topics. This will help to broaden your understanding of other development practices and techniques, and also help you to become more comfortable talking about your role and knowledge in general.

Build

Hook yourself up with a Github account and go and build something that you will use on a regular basis. This pet project can be as simple or complex as you like. Try something that will actually help you in your everyday workflow as you’ll be more inclined to add features and maintain it. Social coding will help you to get peer related feedback, plus if you can introduce a new technique or language along the way you’ll help to widen your skill set.

Interact

Set yourself up with an account on a site such as Stackoverflow or Forrst and participate in some healthy dev discussion. Even if you can’t answer any of the questions straight away, this will help you in your ability to answer questions. Remember it’s important to understand that a great developer won’t always know all of the answers straight away, but will know how or where to find the answers.

Write

Set yourself up with a blog and start writing about your experiences, knowledge and anything you feel would be good to start a discussion. You may find it tough starting out in terms of subject matter, but over time you’ll find your writing skills will improve. This will help you out when it comes to writing briefs and specs for clients.

In summary, you will never learn everything from a University course or a book, actual hands on experience is vital, and the more you can get the better you will become in your chosen field.

At 383 Project, we have been using Geckoboard since it was in beta. Since then the service has improved (from what was already great), into the ultimate tool for getting an overview on the status of your business. This post details how we used it to effectively manage the launch of a series of websites for the Orion Media Group, by using ServerDensity stats within Geckoboard.

In November of 2010 we launched 5 websites for the Orion Media Group. These five sites had served a combined 20 million server requests from Jan – Nov 2010. Needless to say, this was quite a stressfull time and one of the things keeping us up at night was ensuring that the new servers could cope with the traffic.

Without going into too much technical detail, we have a multi server setup with a load balancer sitting infront of three webservers to deliver the front end. We also have a separate database server which also serves the admin, aswell as running all of the various cron jobs to import the array of third party services that are deeply integrated into the sites.

It’s crucial that we knew the status of our servers at any time (even during the night), so we opted for using ServerDensity. This offers us email, iPhone push and SMS alerts to notify us, if any aspect of our set up is above pre-defined thresholds.

While ServerDensity has it’s own brilliant UI for displaying stats, we wanted to be able to have our server stats, and other related stats in one central place.

As we were already using Geckoboard to monitor our internal stats (calendar appointments, tweets, support ticket requests), we decided that this would be the perfect solution to display our information. The main things we wanted to see were; server load, disk usage and memory usage in addition to Google Analytics plus the Twitter accounts.

In addition to the server stats, we were also able to display sign ups to the sites and their method (Twitter, Facebook or Email) so that we could see a complete overview of the performance of the sites, both from a technical and social perspective.

The newly released Meter display was perfect for showing the current, min and max load for each server, plus the the Pie charts make viewing the disk/memory usage easy.

The process was actually quite simple due to the ease and simplicity of both API’s, and as such we wrote a CodeIgniter library. This essentially wraps the ServerDensity API in a number of calls so that it’s simple and easy to get the data you require. All data is returned in JSON format.

There was something for everyone – Kicking off at the RBSA with local craft- based art the bus took a tour of three of Birmingham’s other art offerings. The Barber Institute which specializes in classical styles and cultural artifacts, The IKON and MAC which focus on more ‘contemporary’ work.

Discovering John Salt’s photo-realistic paintings of post-industrial america at Ikon gallery was a highlight (maybe ‘cause we’ve got chevrolet’s on the brain at the moment, he paints cars) At the RBSA we got the chance to talk to some of the artists and learn about their processes before getting our fill of Botticelli and Turner at the Barber Institute. Doug Jones’s hooded garments at MAC were also a creepy source of intrigue for the typography nerds amongst us.

Visiting so many galleries in such a short space of time was an assault on the senses, and was brilliant inspiration for our day job. We will definitely be visiting again next year… so long as there’s more refreshments.

So, I created HydraHack, a meetup for developers in Birmingham who want to hack on projects with other developers or just grab some time for working on their own code. It should be less about sitting for 40 minutes through a presentation and more about meeting other people and sharing ideas and code.

Begin

Picking a date was the first step, even before I had a name or any idea who should turn up. Pick a name, book a location, now I had a deadline. I fired a few emails off to some local devs for a sanity check “Yep, good idea.”

Promote

To get some interest, I threw up a static page running on Heroku with the details and got the domain. I added a Twitter button which broadcast the meetup to anyone that RSVPed. Although I had to push a new version of the site anytime anyone actually pressed it, was actually quicker than writing any real code.

I had a few local developers in my Twitter list so they all got an invite, there’s also a couple of local PHP and Ruby meetups, they were a great place to get some initial interest. To find people outside my regular network I used really ugly services like Twellow to find some other web folk, there’s quite a high noise rate but I stumbled across a few people I’d never met before.

I also put the event up on Laynrd which is becoming the best place to RSVP/ Track events. Not only is it tied in to everyone’s social graph, it helped me find a bunch of similar events and more local developers to share the event with.

Profit!

Kindly Campaign Monitor agreed to sponsor the drinks for the first meetup. With the lure of free coffee we managed to get 16 developers crammed into Urban Coffee Company hacking away on various projects. I’d just like to say thanks again to everyone that turned up, I couldn’t of asked for a better start.

Next

The next meetup happens May 24th and future events will be announced on hydrahack.co.uk. I have no idea how it will evolve, but I like making things fast and watching what happens.

Last week we launched the new website for Benjamin Ryan, a premium hair and beauty salon based in the heart of Birmingham.

Benjamin Ryan approached us with a brief to design a new website from scratch. They aspired to create a site that more accurately reflected how dedicated the team there are to their craft. The insight was that the staff at Benjamin Ryan are known as creators of beauty, so why isn’t their site as beautiful as their product? We set about trying to fix this.

To make sure the site really got the client noticed we decided to go with a darker, simple overall look & feel. We wanted to give Benjamin Ryan the opportunity to showcase their work and creations on their website. The content managed montage of images on the homepage allows them to do this, generating black and white versions on the fly and caching them as necessary for speed.

We paid close attention to the smaller design details in the background, and also added some subtle visual effects to the navigation, in-keeping with the site’s design.

You can take a look at the site here: www.benjaminryanhair.co.uk

It’s that time again when in classic 383 tradition things go a bit silly and we set a little Christmas project out in to the wild. This year is no exception, and so, without further ado, we give you Jumpify.me. Why? Because everyone loves Christmas jumpers.

Jumpify me allows users to pick photos from their Facebook albums, and try on a number of delightful pieces of seasonal knitwear. We hope you enjoy using it as much as we enjoyed making it. Happy Christmas.