Richard Askew

I build websites...

Experiments...

Being a PHP developer my main focus on projects is moving data around and presenting it so that it can be manipulated by designers. Saying that I also enjoy the front-end work and have deep knowledge of HTML, CSS and jQuery as well as more left-field technologies that I have come across over the years. I like playing around with new things and this page allows me to share them with people who might be interested. They are not all complicated implementations and don't always make it beyond this point.

CSS3 Animation Demo

As I'm teaching Web Design I thought it would be a good idea to ask my students to produce an educational aid only using CSS3 techniques. I thought showing the earths orbit and rotation would be a good way of working with animation and transitions.

The first thing I had to do was work out a way of moving the Earth around a circle. This tutorial has cleverly achieved it.

The second step was to show the rotation of the Earth. The Earth is just a DIV with the border-radius set in such as way that it is turned into a circle (The Sun is also achieved this way). I have set a background image but ensured that only a portion is visible. Within the orbit animation I move the position of the background image from 100% to 0% giving the impression of rotation.

Finally, the rotation transform property is used to tile the Earth ever so slightly.

Not bad for 45 minutes work!

Parallax Scrolling

You see this effect all over the place now and so I thought I'd play around with this tutorial from nettuts. I've created a very, very simple implementation that plays with the idea of the tide going in and out, take a look.

Infused News

Infused news was created as part of an Internet Computing degree at the University of Hull, Scarborough Campus named “An investigation into the need for user-submitted, multimedia content when delivering news”. The aim was to integrate user-submitted, multimedia elements into existing news stories and evaluate whether or not this augmented version of the news not only makes the story more compelling, action provoking and understandable for the user, but to investigate whether the use of multiple sources gives the news story a more balanced, honest and up-to-date view of the news story.

The mix of media (Imagery, Sound and Video) often enhanced the story being presented. The keywords used often return media isn’t relevant due to keywords not being given enough context, or media being tagged incorrectly. If more time or the funding was made available I would look further into utilising Ambient Interface technology so that the application could deliver the information in an engaging way.

The application has been submitted to the BBC and accepted as a prototype on BBC backstage.

A big thank you to Programmable Web for making Infused News Mash-up of the Day!

Technologies and Resources

Unfortunately the RSS feed by Duncan Barnes is no longer supported but in the interest of posterity Infused News has been re-written with a ststic news article.

RSS Feed created by Duncan Barnes

phpFlickr

Google YouTube API

Yahoo Term Extractor
Related Blog Post: Keyword Extractor How To

Where I can be found...

How I built this site...

I used to have a very boring site full of texty text that no one read. I'm a developer by trade and have always struggled with the design side of things so I thought I'd concentrate on making a prettier site than I normally would.

It should keep evolving over time but I used the following websites and resources to kick me in the right direction:

Header illustration

Lovingly created by House of Deadleg

CSS3 banner

webdesign.tutsplus.com

Font

Lobster from Font Squirrel

Background

BGPatterns Generator