Articles I really must read when I get to work

September 18th, 2010

Quick post with a series of URLs I’m keen to look at in more detail. I tend to skim things when I come across them, but the following pages deserve a closer look and a demo or 2.

Creating awesome CSS3 animations – Thomas Fuchs

At the moment, my work is all about how to start producing Flash style animation without Flash. This looks like it should give me a few insights into achieving this with CSS.

Processing demos at Monocubed

On the path to figuring out this animation puzzle I’ve also been playing around with ProcessingJS. Monocubed has heaps of great demos, most of which are really easy to replicate

How to Centre and Layout Pages Without a Wrapper

As soon as I read  the first paragraph I’d ripped off the idea and starting playing with code. But I really should read through this article entirely

HTML5 Doctor

Just sit down and devour this site I think…

CSS Gradients

Turns out that ye olde IE6+ has some gradient tricks up it’s sleeve… not quite (!) as flexible as the modern browsers, but still work reviewing this to see what can be squeezed out of the old dog.

Tags: , , , , ,
Posted in Bookmarks, Canvas, CSS, html | No Comments »

Playing with SVG via Raphael

September 18th, 2010

A few weeks ago I spent some time looking into animating content on the web using Raphael (this eventually formed the basis of some challenges for the team I’m in at work).

The demos are pretty basic:

Hand Draw http://www.david-lewis.com/test/svg/handdraw.php
This small script takes a SVG path, and chops it up into an array, then loops through the array building up the path data. Sprinkle in a bit of Raphael’s animation, and you’ve got something that looks like the path being drawn.

It’s very crude and basic, but works well when combined with graph drawing.

Load SVG file http://www.david-lewis.com/test/svg/loadfile.php
SVG is great, but doesn’t render on all browsers (hello IE). So this little test shows how you might break down the SVG file and run it through Raphael so it works almost anywhere. I based the demo on an Inkscape file, not on the spec for SVG. Hence it works nicely with SVG files from Inkscape but not much else (sorry).

The long term goal with something like this is to allow designers to use a nice image editor, and the developer to just treat the images as external assets… therefore, if the designer wants to make changes, they don’t have to hassle the developer.

Both these demos can only be considered proof of concepts. I will return to the SVG parsing, once I’ve played around more with animating content without  the need for Flash (next stops: Canvas, and good old jQuery Javascript animation).

Tags: , ,
Posted in SVG | No Comments »

Return of the Sheep Game

February 20th, 2010

Return of the Sheep Game? Maybe… as it approaches it’s 10th birthday what am I going to do?

The bulk of the code for the Sheep Game has been untouched since 2001, when I updated from Flash 4 to Flash 5. I’ve had a couple of attempts at rebuilding the game, but never quite managed it.

With the tests I’ve done in the last few years (playing with AS3.0 and Unity) I always thought it would be to make a 3D version of the game, but it’s never quite come together.

In the last week I’ve put together the following demo: http://www.david-lewis.com/test/SGJS/ when you look at it you might just think “erm, that looks like the old game except I can’t resize it”, and you’d be correct. I’d be happy if you thought that because that demo has been written from scratch using only HTML, JS and CSS. I think this is where the new version of the game will come from.

When it comes to producing a richer user experience, the combination of HTML, JS and CSS has always been the poor cousin of Flash + ActionScript. I’m starting to see that this situation will change as technology like HTML5 + CSS3 settle and we all continue to play with things like Raphael and jQuery

This demo has shown me that I can produce something that is Flash like in around 10 hours, that works on every modern browser (yes this demo even works in IE6), and it was great fun to produce.

From this I hope to use the SheepGame to deliver a professional looking game using the fundamental technologies of the WWW.

Posted in Uncategorized | 5 Comments »

Working together with CSS

November 7th, 2009

For the majority of the time I’ve been developing websites I’ve done it alone, not having to worry about other people understanding my code or thinking about what happens when I’m not longer around to look after it.

In the last 3 years I have worked in larger and larger teams and I’ve found the following guidelines quite useful for making the change from solo developer to a member of a team. Read the rest of this entry »

Tags: ,
Posted in CSS | No Comments »

First post

November 7th, 2009

This is the first toe in the water… whilst I short my bits and bobs out you may want to nip over to: eisabainyo.net where there are lots of great tips on guidelines on web development.

In getting myself up and running I’ve chosen to use the rather lovely jQ theme by devolux.

Tags: ,
Posted in Wordpress | 2 Comments »