colinwren.com

Recently at work we’ve been experimenting with Scribd as a means of making our publications more accessible to a wider audience. Before Scribd we were putting up lists of PDF files for people to download. The only issue is that although it’s great for office workers and people on Macs (god bless you Apple and your built in PDF support) who won’t need to download Acrobat to read these documents, most people will.

Luckily a lot more people have some version of Flash player installed, and well Flash is just Flashier so using Scribd’s awesome iPaper interface we uploaded around 60 documents and then using some ASP magic I built a way of changing the variables in the embed code based on an in URL variable. This worked perfectly and got a thumbs up all round.

Then I viewed the page on my iPhone.

As everyone and their mother knows the iPhone lacks Flash support. So now because we’ve removed the list of PDFs and added the Flash there was no way to access the files if Flash was not present. After a bit of searching I discovered that the embed code needed little changing to add a fall back.

The embed code for Flash movies and the like goes a little like this.

<object name="movie variables">
<param name="name" value="here's the stuff that defines the movie" />
<embed name="here's the stuff that defines the movie">
</embed>
</object>

As you can see all the tags are within an object tag, It’s within this object tag that we will be placing our fall back content. Before we do so we need to turn that embed tag from a paired tag to a self closing single tag like so:

<embed name="movie definition variables" />


Now we put our content that we want to display if there is no Flash player after this embed tag (but still within the object tag). This means that when there’s no Flash player it shows this alternative content but when there is it just shows the Flash movie. So here’s an example:

<object name="movie variables">
<param name="name" value="here's the stuff that defines the movie" />
<embed name="here's the stuff that defines the movie" />
<p>Sorry but this content requires Flash player, please download the Flash player or download the PDF below</p>
<p><a href="pdf">Download the PDF</a></p>
</object>

Of course what you include in this fall back is completely up to you. If your going down the design route maybe a well designed image in the dimensions of the embed player with an apology would help. Of course linking to the Flash download is a better way of doing things. This is only really meant as a introduction into the technique.

If you have the .swf file for the flash movie you are embedding then I’d suggest you give SWFObject.js a look as this Javascript library handles this for you and generates the code you need. Though as I was embedding from another website I couldn’t use this.

If you’d like to check out the Scribd implementation on my work’s website you can by going to www.stgeorges.nhs.uk/mediaannual.asp

Mega happy today. One of my heros Evan Roth replied to an email I sent him about a Processing app that reads Graffiti Markup Language (GML). A while back after I downloaded the dust tag iPhone app I tried to see how to use the data from my tag could be used. There is already a GML to DXF processing app so I stole the file reading aspect from that and then using another awesome processing app written by memo Atkins? I used his drip code to create a graffiti app that output a GML tag in a style that looked like someone had written it in really wet marker pen.

The only issue with it at the moment is the tags use points so the tags dont come out perfect. I’m hoping to add code to that it uses the time function to write it as it was written and the hopefully get a tweening function too.

Then maybe I’ll get my name up in lights next to Evan Roth’s

It would appear that I didn’t manage to save my old theme when I was trying to sort out my old blog. It’s a massive bummer as I put a lot of effort into making that theme as awesome as it could be.

Still as they say, every cloud has a silver lining and it means I can now start making a new theme and learn from the previous one to make something much better and personalised. I can use technologies I wasn’t aware of before and just experiment.

So I guess it’s time to jump into Photoshop.

Part 1 –  the layout

It goes without saying that the most important part of any website is the layout. Without the layout all websites would be an unorganised mess. There are many layouts available, most people tend to go for a centered single column that is then broken into 2 after the header. I decided that I wanted go for a more artistic layout and have it break into 3, though the 3rd column would be left empty for art.

Inspiration

As a Mac fanboy it would be incredibly hard not to be inspired by Panic. Their blog is well thought out , uses just a single column and has different styles for each category of blog post which in my eyes is just genius. I liked the category idea as it helps to break the plain look of sites and also helps to add a personal aspect to each subject. This is certainly going to inspire my design. This will mean that my layout will need to have a lot of padding to make this kind of thing work though.

Another one of my loves is 8-Bit graphics and music. I’d really like to use my site to replicate an old video game of sorts. I’m also thinking that I can use my footer to make a little 8-Bit like village where I can post links to other peoples sites. This would give the user incentive to read all the way to the bottom of each page. Especially if I could use the Trackbacks to the blog posts to populate the single post pages.

Photoshop

I’ll write this out like a To Do list so that everyone can follow it easily.

• Open up Photoshop and create a new Document. I used the web preset of 1024 x 768.
• If your going for a centred layout then first set up your side padding (so that the content always stays in the center, the remaining space will be how wide your wrapper div will be).
• Now set out how long your header will be. I chose 150 pixels as I thought this gave me a fair amount of space to work with.
• Below your header will be where your content will be, set out your navigation where you want it, I chose a small box padded by 10 pixels on each side (which will become a hot air balloon later).
• Next set out your post’s will go. A good thing to remember is that as you blog your posts will be of various sizes so it’s best to design with the shortest post in mind.’m going to make sure that the posts are never shorter than the navigation box (by using CSS)
• Now set out any other boxes (I don’t have any here)
• Finally add your footer (don’t forget the padding). My footer will be 200 pixels high as I want to add my little village.

Once you have followed those steps you should end up with something like this:

The final product

Now the next step is to start adding images to these. Time to get out our crayons me thinks!

Part 2 – Graphics

Adding colour to the layout

Now we’ve got our layout designed it’s time to start making it look pretty. I’m going for a retro 8-Bit feel which means 2 things: Pixel Art and restricted colour palette. I found this awesome NES colour palette on deviant art by Erik the Red which provided me with an accurate colour scheme. I decided to make my pixel art at 2x zoom so that means for each section of the layout I scaled it down by half, did my pixel art magic and then rescaled it up to the original size (make sure when doing so you select the nearest neighbour option). Doing this means that you can see the pixels clearer (essential for pixel art). Below is the finished product and I’ll include the photoshop document as well (I’m using CS4, I’ve compatiblesed it so should be ok on CS2 +).

complete layout for colinwren.com

Download the Template

When you open the photoshop file you’ll see that I divided every element into a separate layer, this is so I can get a better grip on how the space behind each element will be best used. On the complete website if you resize the window you’ll see the clouds behind move and the sun moves aswell. To do this you will need to select each elements inside it’s bounding box and export (transparency is key if you want the awesome effect).

The best part about using an 8-bit style is the fact that your never going to be using loads of colours. I think the most I used was 32, meaning that even with everything in there my 1024 x 768 image was only 20KB when converted into a gif (using the least amount of colours possible and no dither). Most elements were about 2 – 4KB so this will mean my pages load really fast. I tend to use PNG-24 because I find it’s smaller than JPEG and offers better quality images but when dealing with this type of image GIF far out performed anything else. Just goes to show you should never forget about those old technologies.

Part 3 – HTML

Making sure the template works in good ol’ HTML

Once you’ve exported all the various elements it’s time to start making the HTML for us to CSS up. Following my layout I made a basic structure with 6 divs (1 wrap with the over elements inside) naming each div accordingly. //Edit – I decided to break out the header and add top and bottom divs to the post div so that I could make my theme better.

I then created my CSS file. For the basics of the CSS file I made each element the width and height (though don’t define a height for the post as you’ll want these to stretch) of the elements in the photoshop file. I then fired up the awesome CSS Edit by MacRabbit and positioned each element using it’s awesome live editing functions. The wrap is auto centered, this means when you resize the window widthwise the clouds move. The menu uses fixed positioning so that when we scroll down the posts the balloon follows. I’m including the full files below for download.

Download page source

Download page style

Once the HTML file is working how you want it to, it’s time to go onto the next step. Adding WordPress functionality.

Part 4 – WordPress Hooks

Dynamically adding content to the elements on the page

Although I am writing from a WordPress perspective the technique I’m using (of creating a HTML file and then adding the platform hooks to the code) will apply to most CMS / Blogging platforms. The way most of these platforms work is to use special PHP (or whatever language it’s in) commands to pull the content from a database. If you’ve ever gone through a template you’ve downloaded and seen tags like the_content(), these are those hooks.

My site got hacked. Well two if my sites got hacked an now I’ve got to start all over again. I’m hoping that I will actually update my blog more often than I did before as I can now actually use the XML-rpc settings on my blog so I can blog from my iPhone.

I found an excellent tutorial on locking down the security on a wordpress blog which I will be doing this weekend. I’ll be linking to it so people can protect their sites too.

Here’s to a fresh start.