Its been almost 2 years since we produced DuckPad, an innovative iOS tablet adaptive web design app. It was essentially a very ‘adapted’ version of our website optimised for iPads and ‘touch’. 

Today we have some exciting news. Not only have we updated a new and improved version of DuckPad but as the most ambitious and innovative independent digital agency in the UK, we spent all weekend producing 3 new apps:

1. Kinect web app - Allows the user to scroll through artwork and artists using their hands (via a PC with a Kinect device attached). This application was developed using the Kinesis framework.
2. BI Dashboard - Business Intelligence Dashboard that aggregates server uptime, Google Analytics data, time spent on projects (with a breakdown of time spent on dev, UX, marketing etc’).
3. Error Eogging Console -  This application collates all errors from all websites and SaaS applications that Cyber-Duck created. It displays everything in a responsive web design (RWD) dashboard that works perfectly regardless of the medium (It will work on a 55” Samsung HD LED TV or on a Android 4.3” phone).

We will be posting links to the videos about the projects later today!

At 12:30 today we cracked how to develop an HTML/CSS gesture app via the Xbox Kinect. This was all possible due the SDK (software development kit) and sample codes from Kinesis.io. Basically to get started and create your own HTML/CSS/JS apps for the Kinect you need the following:

1. Microsoft Kinect for Windows (you can buy one at Ebuyer for £165)
2. Download Kinsesis SDK for Windows (Free, you need to register on Kinesis.io)
3. Download Kinesis HTML/CSS/JS demos (Free, as above)

Let’s summarise day 01 (Saturday) where we aimed to “develop an ‘artist gallery’ browsing app” and list our key acheivments:

• We came up with a name for the Project - “Project Wave”
• All the teams came up with names, we are Team3 “AirWolf”
• We planned and created wireframes for the UX (user experience) of the app and we even listed the key specifications
• Conduct techncial analysis to understand how Kinesis works
• Installed the Kinesis SDK for Windows
• Got the Kinect interface working
• Downloaded demos and started reviewing the code
• Prepared all the assets (images of artists from Castle Gallery)
• Finished the designs

quackhack:

1 hour and 19 minutes into the Quackathon and Team 3 have proven why they are indeed the smartest Duck’s in the Pond. They have solved the issue of getting the Kinnect to interact with the PC. We will upload a ‘poor’ quality video of it working soon.

Yes Siji, you are right. Just about as we were giving up I found a brilliant Kinect Hack article by Vangos Pterneas, a student of the Athens University of Economics and Business, Department of Informatics

quackhack:

1 hour and 19 minutes into the Quackathon and Team 3 have proven why they are indeed the smartest Duck’s in the Pond. They have solved the issue of getting the Kinnect to interact with the PC. We will upload a ‘poor’ quality video of it working soon.

DuckPad has been released into the wild and we were very proud to be speaking at C21 Media’s iPad Entertainment Summit last Friday. Cyber-Duck presented a talk on developing a web app for the iPad amongst major industry names like BBC, Channel 4, Sky, NBC and the fantastic Stephen Fry.

We discussed the benefits of creating an app in HTML5 vs building a native app, and the challenges we faced and concluded by unveiling DuckPad to the audience.

If you have an iPad, point it at http://www.cyber-duck.co.uk/ipad (you’ll have the best experience if you then save the bookmark to your homepage and launch it from there).

We are still learning and experimenting (DuckPad was born of an R&D project after all), currently we are in the process of streamlining and optimising the JavaScript and looking into potentially using Google’s new WebP image format to further tweak the performance.

There is additional functionality we’d like to add, making further use of the new awesomeness HTML5 allows - of course we’ll be detailing new developments here.

As accredited Apple Developers, we have the option to build and make our application available as a native app. Apple currently recommends you create iOS games and apps using their Objective C language, however frameworks such as Phonegap allow us to essentially ‘package’ an app built in web technologies such as HTML5 into a native app. 

But why?

Innate benefits include ridding yourself of the web browser’s UI elements (such as the taskbar), and being able to run the app offline, without 3G or Wifi connection. Then there is access to the iPad’s accelerometers, amongst other goodies, not to mention the kudos of having your project in the App Store! Yet given the notoriously long vetting time for applications, along with our own strict deadline, is it worth it, let alone possible?

Luckily for us and our users, a combination of inbuilt iPad functionality and nifty HTML5/CSS3 allow DuckPad to appropriate the trappings of a native app while running in Safari. 

But how?

Whilst new CSS3 properties allow us to do things such as disable the copy/paste dialogue, fix the viewport and re-colour the unsightly grey box that appears when page elements are activated, the foremost problem with Safari is the browser chrome. As well as taking up valuable screen estate with UI elements we don’t need to navigate through the Duckpad, this is distracting for the user. 

By using the ‘apple-mobile-web-app-capable’ meta tag, we can launch the webapp fullscreen taking full use of the iPad’s screen. To further the app-like experience, we can create and set a bespoke icon that can be saved to the iPad’s home screen in order to launch DuckPad.

Finally, with the wonders of HTML5 caching, we can use the app offline, without requiring WiFi or 3G connection. There are however, limitations  - all new content must be loaded dynamically in the one bookmarked page, whilst a 5mb cache limit means offline viewing of our videos out of the question. Furthermore, we have been experiencing a problem affecting the custom SVG fonts we’ve used when cached which has implications for both design and branding. (see our earlier post on SVG fonts)

With HTML5 the line between web app and native app are becoming blurred, especially on the iPad. We feel that for simple, applications that are quick to develop and work across platforms - HTML5 is the future!

Often when people talk about HTML5 (ourselves included), what we really mean is CSS3. HTML5 and CSS3 are bedfellows through and through, and what CSS3 gives us is greater visual sophistication without resorting to graphics, and the opportunity to create front-end animation and effects usually the reserve of JavaScript.

Common visual elements in Web/UI design such as rounded corners, gradients and drop-shadows can be created with ease with newly introduced CSS properties. Not only does this decrease the amount of images elements we must chop from our designs, but it decreases the server load of files.

Furthermore, with a little creativity, we can create more unusual elements through code. For example, need an arrow : how about give a div two thick borders and rotate 45 degrees?

Best of all, through the application of the -webkit-transition property, CSS3 will smoothly animate between almost all of it’s properties (be it width, height, colour etc), simply when a new value is applied to an element.

The question then is, why use CSS3 animation if JavaScript utilities like jQuery can do it with greater ease?

Aside from “because we can” and “it is the future!” (which yes, it is!), CSS3 animations are substantially quicker than their equivalent JavaScript effects.

So far this has been used extensively to create a variety of growing, sliding, fading UI elements in DuckPad - which had they been done exclusively in jQuery, would have been too heavy for the iPad’s modest processing power.

There is a certain catch however, that to create our CSS3 animations, much of the time we need JavaScript to manipulate all these CSS3 properties. Similarly, there are certain things which would be simply too complex to recreate with CSS3 within our 6 week target, so we resort to trusty old JavaScript!

As such, front-end development has often focussed on how much we can push CSS3 whilst maintaining the degree of reliability and smoothness we, and our users would expect. This takes the ménage à trois  of HTML5, CSS3 and jQuery!