aled's cyfle

Wednesday, 31 January 2007

Inline images within your HTML page

Posted at 8:11 pm. 1 comments

I've been working on a Mac ever since starting at Dimension 10, and recently bought a MacBook (woohoo!). I've also been using Bloglines for years as my feed reader.

A few months back I installed Jon Hicks's Bloglines skin, which provides a much nicer interface to the usual bloglines design for Firefox, Camino, Safari, Omniweb and Opera browsers. The skin is built for Mac, though it apparently should work on other platforms too.

Last week I installed the skin on my MacBook (woohoo!), and before installing it I took a sneak-peek at the CSS. What I saw surprised me - the images used in the CSS for various elements had the data encoded into the file. This made the page redundant from any outside sources, and made installing a lot easier with only 1 file.

Since then it's been puzzling me how to do it. I know why people do it, in this case at least... You don't have to download extra images. This means that self-contained web apps such as Loggr and GTD TiddlyWiki - apps in web-browsers that you can download to your computer - could contain images without having to link to them anywhere.

I searched and searched, and finally came across a few good resources. Images in these instances were encoded in base64-encoded binary, which is text that's readable by machines. Ever viewed the source of an e-mail seen a lot of unreadable characters? It's likely to be an attachment, and if its an image, the likelihood is that it's base64-encoded binary.

There's a really good explanation at Wikipedia on the subject, and an online image converter at Greywyvern.

I gathered a couple of important notes on the subject from Wikipedia that I think I should outline here:

  1. Internet Explorer (as is predictable) deals with this kind of data unpredictably. It's the later versions (6 & 7) that have no support for it.
  2. The browser will limit the amount of data processed, which could result in a broken image if the data is more than the limit. Opera has a file-size limit of 4kb.
  3. It's downloaded every time a page is loaded/reloaded, meaning it cannot be cached
  4. It results in a larger file size

However, in my opinion, you shouldn't use Internet Explorer or have large images in your site anyway. With broadband speeds, downloading the data over and over again won't be a problem for the user, but might be a problem for your bandwidth; and though it would make the file size a little larger, you'd be downloading the image itself anyway, with the same data in that image.

I've always fancied a go at coding a self-contained web-app. Knowing this gives me inspiration and ideas. Hmmm, we'll see.

Monday, 29 January 2007

Mind Mapping heaven

Posted at 9:36 am. 0 comments

I've discovered that in this kind of work, planning a project well is crucial. An important part of this is brainstorming and writing it down on a piece of paper.

I get frustrated when I realise that I've written something on one side of the paper that needs to be linked to the other, and even though I know I shouldn't worry about it, I often start again, which wastes valuable time.

I had briefly searched the web to find any software that would do it for me, and all I could find was shareware software that produced, at best, unattractive and confusing mind maps.

But now through Lifehacker, I've found - a service that provides a flash interface for you to build a mind map of your own, save it, and load it up again later. Brilliant! The only drawback as far as I can see so far is that it has no printing facility other than Flash's built-in functions, which makes it a little harder to document what you've built.

I can see myself using this on every project from now on, yipee!

Wednesday, 24 January 2007

Quick update - Malaysian brief

Posted at 12:31 am. 0 comments

It's hard to find time to blog between handling two official Cyfle project briefs and one unofficial brief, so this is just a quick update on our Mygo interactive TV brief.

Communication is difficult between the two teams. When we get to work, the team in Kuala Lumpur are clocking off. When they get to work, we go home. It means that we're basically a day in limbo every time we post something on our secret forum or email them.

I say every time we post something on the forum - we didn't get round to it until today. The concept we're going for (and hoping the Mygo team will go for too), is a simple, democratic, multi-user hangman/anagram (hangagram?) game, set on a backdrop of an eerie, B movie-styled interface (it's all a mystery, eh?). Take a look at our first treatment:

Our initial treatment - click to enlarge

Hopefully the team will like enough so that we can start developing it. Problem is: How can you develop something for someone else when you haven't got a clue how they do it? I understand that they'd be reluctant to release any pre-made code to us, so I hope we can achieve a good product from whatever information and guidelines they give us.

Wednesday, 17 January 2007

S4/C rebranding

Posted at 1:56 pm. 1 comments

I just thought I'd post my thoughts on the new rebranding S4C have just undergone. I think its relative, since I and Carol did a non-live site for their sgrin magazine.

I must admit I'm not sure what to make of it - the logo obviously symbolises the channel's "moving forward to the future" attitude - the '/' becoming synonymous with the world wide web, and you could think it symbolises "Sianel 4 dros Cymru", or Channel 4 over wales (it works better in Welsh).

Their new website was launched earlier this week, and while its a refreshing take on their old website, I think it still lacks something to make it stand out and be different. If they could sort out some accessibility issues and incorrect translations, I'd be very happy.

View their idents on Youtube, and read more about it on digitalspy.

Interactive TV in Malaysia

Posted at 12:35 am. 0 comments

As I just posted, we've recently been given two briefs. Both have a production period of just under 5 weeks by now, and both overlap each other. By having 2 briefs, we must manage our time carefully. We've been quite lucky this time, though.

As with our 2-man briefs, we could choose who we wanted to work with for our 5-man brief, which was a collaboration with Mygo, a games and interactive TV development company based in Malaysia. However, we decided that, in order to save hassle and potential friction, we asked Gareth the supervisor to split us up. He did, randomly, and we've all ended up in groups of 5, four of which work together in pairs for the 2-man brief. Unfortunately, there had to be a split, and happened with Gareth and Shamim.

So, our 5-man team consists of Shamim, Zoe, Lindsey, James and myself. Both groups have an even split of designers and developers. Next up, which brief went to which group? Only one brief from Malaysia was the interactive TV one, and it was our team (not the self-proclaimed "A Team" :P) that were the lucky ones. All very exciting.

Our brief: To develop a game that could be used on an interactive game channel in Malaysia. Super! Mygo's experienced team of developers will help us, and apparently, if our concept and execution is good enough, it might go live. IN MALAYSIA! Cool or what?!

Video conferencing

Today we had our first of many video conferences with the team in Malaysia - a surreal experience. There's an 8 hour time difference with us in Cardiff and the team over there, so we had the conference in the morning (over here), and in the evening (over there).

Video conference

I say video conferencing... there was a little problem. The "A" team went in first and it worked fine. For 10 minutes, that is. Then the webcam went blank and the video feed was lost. At our end, we could see their team, but they couldn't see our end. I'm sure the "A" team had something nothing to do with a plot to sabotage our conference (just kiddin' guys!).

Anyway, when it came to our meeting, it was a little bizarre. I felt like we were spies, knowing that they couldn't see us, but we could see them. A little unusual also was the time delay - it seems like it happens even on the internet superhighway. We pitched 3 of our initial concepts: a bagh chall game, a penalty shoot-out game, and a mystery treasure hunt game. We found out the bagh chall game was a dead end when we realised that the game had to allow for any amount of users to play at any one time - using their mobile phones.

I was then appointed the contact person between our team in Cardiff and the Mygo team, and tonight (Malaysia's morning) we sent them a more detailed treatment of our lasting two concepts (both of which they liked). I'll write more about our treatments another time, its getting late, and I have a meeting tomorrow!

New Year and People First

Posted at 12:10 am. 0 comments

A nice break: Lovely Christmas, awesome New Year, a lot of alcohol, a lot of hangovers, and 2 new briefs.

I hadn't realised how long it's been since I last updated my blog... I've been slacking - and it was one of my New Year resolutions to blog more!

Its been a busy week and a half since we got back to Cyfle - and this is likely to be the quietest part of the rest of the course. Oh well...

A few days after restarting work, we got the first of our 2 briefs. This one was the 2-man brief, which I'm working on with James. We all got to decide which brief we'd like, and we got a brief to develop a website for Vale People First.

Vale People First is the Vale of Glamorgan group of a global voluntary organisation of people who have learning disabilities. They meet to discuss issues they have in their day to day lives, do a lot of fundraising, and promote self-advocacy in the community. We met Liz Davidson, the VPF co-ordinator and the committee last Wednesday to discuss ideas.

They want a website with a diary, short biographies of all their members, a page to show their photos, and pages to explain to everyone what they do. This brief is going to be exciting because we'll be implementing a variety of different things to get the site complete. Among the technologies are: A bespoke control panel that all members can log in and write diary entries, a Flickr mashup to display their photos, and Flash video.

After our first initial meeting, James and I got right down to business and drew out pretty much everything we needed to do before going into production... and we're meeting the guys again tomorrow to discuss our designs and (hopefully) get them signed off.

So good are we that we've even started our own blog about the process of this brief - sketches, meeting notes, treatments, the lot! It even includes video posts (did I hear you say Wow!)

Check it out at