Just thought I would tell you all about a new site that I’ve created for homework. It’s for an Oxford based band called Branch Immersion, a three piece acoustic outfit, some friends of mine. The site is hosted on the uni servers at the moment but I expect we’ll host it here at SkinOfStars towers soon enough once they’ve bought their domain name and I’ve ported the static pages to Wordpress.
This is an original design and I must be honest, one I am very proud of. Please check it out at the temporary address (I’ll update with the final address later):
I’ve decided to do a blog hack in a day and here you see the result. I was struggling with Drupal as a blogging platform, and frankly an anything platform, so I decided to move to the decidedly easier Wordpress. I’m not saying there is anything wrong with Drupal, it’s a great platform. The problem is that it’s built for so many tricks that you have to give it a real shove when you want something simple. For example, handling images. On a content sytem one would have thought that would be an obvious feature, but with drupal you have to go get a plugin. Madness I tell you! Not that getting Wordpress means I’ll be bloggin frantically, but it makes life a lot easier.
So here is how I got from Drupal 6 to Wordpress 2.7 in a day:
Backup the Drupal database & import the data into Wordpress
Moving around between platforms is quite common, so you’ll often find a script to aid you in moving database info from one structure to another. Wordpress has many such scripts built in for many platforms, but for Drupal I got my assistance from Mike Smullin. I had to make some minor changes, for example I added this SQL statement to change my Drupal post_type ‘story’ to Wordpress’s ‘post’
UPDATE wp_posts SET post_type = REPLACE(post_type,’story’,’post’);
Pretty easy stuff really. If you’re going to do it yourself, make sure you do it locally on backup copies. I hosed a few before I got it right.
2.Theme Hack
Ahh yes, the inevitable theme quandry. I had thought about what I wanted Skinofstars.com to look like for a while, but I wanted to do it reasonably quickly as I hate it when these things hang around. My layout plan was simple enough. Only one or two blog posts on the front page with info on my other nettyness, like tweets. I also knew that I’d want access to other pages (as you find in the Further section.. not sure on that name). So I searched some Wordpress themes and came across Grid Focus. It seemed to have the right level of minimalism that I was looking for as well as reasonably suitable layout. In order for it to work for me though I had to make a few hacks including some JQuery magic to include my further section (hope you like the transitions) and some layout hacks for the differences between a narrow and wide content column (you’ll see if you view this in single/comments mode).
Content Update
Probably one of the most time consuming parts. Much of my old content was Uncategorised for no reason and lacked any tags. Many posts from back in the Blogger days didn’t even have a title. I went through almost all of them (I’ve taken a break from the 1996 stuff) and finally managed to put these years of outpourings into some kind of order.
Update to server
Well, that’s just a bit of FTP and MySQL. Job done.
I’m preemptively titling this post as Boxfire 1 as I know there is more info to come. My dissertation produced a website, or should I say that I have produced a website for my dissertation. Either way, it’s a collaborative news filter for Oxford that relies on user interaction to find the most important news story for the area. Please try it out and tell me what you think:
I’ve battled for days on this, but I now finally know how to parse feeds and store them in a database in Ruby On Rails. This won’t be of much interest to the casual reader, but if you are scouring the web for an answer (as I was) then you will probably find this very useful:
I’ve been looking at some interesting research regarding the manner in which users read web pages. I’d come across click mapping previously (links below), software that records where users click, but the Nielsen Norman Group’s eye tracking study follows where users actually look. Though their study tends to focus on commerce aspects (how much do users look at your adverts?) it is also fascinating stuff for those of us wanting to create clean and clear designs.
First thing that’s worth noting, users rarely spend time looking where you want them to. They tend to follow common patterns, the most notable being the F pattern (a couple of quick horizontal scans of the page as we head down it). This means it is for us, the designer, to be aware of this and place our most important content in these areas. One might argue that a regular visitor would know where the most important information on a site is held, yet anyone with any sense knows that we want to make a site clear for everyone.
Now for banners and adverts/promotions. I’m not going to say how to get people to read them (in fact, I’d recommend getting AdBlock Plus to just cleans the web of them!), but if you want to ensure people read all information on your page then make sure that it doesn’t look like an advert. Users have an automatic tendency to ignore anything that looks like a promotion.
Next up I’ll point to Nielson’s study on how pages are read. The key point is that people don’t read, they scan. If you want to make life easy then you could put important anchor words in bold to aids the reader down the route you’d like them to take. When you’re marking this up in HMTL consider whether you should use the ‘b’ or the ‘strong’ tags. Are you merely creating a visual guide (b/i) or do you want to emphasise a word (strong/em)?
The final point I’ll pick up from Nielson is his discussion on screen sizes. Nothing surprising here, most people use 1024x768, that’s a laptop widescreen. One thing I’d like to add to is the misconception that laying out a web page is like laying out for a newspaper or a magazine. Screen sizes and resolutions are not fixed, there is no ‘above the fold’, like we find in newspapers. Even different choices of preferred system fonts or different browsers have an impact on where the cut-off will be on different machines. Interestingly, Neilson does point towards making site layouts fluid for different. Though I don’t consider this such a hard n’ fast rule, I’d like to point you CSS monkey’s 456 Berea St’s article on elastic layouts.
That’s it for this week folks. Happy building.
Some further linkage:
A wordpress clickmap: http://www.rogerstringer.com/projects/wpclickmap
A more general use clickmap using PHP and JQuery: http://css-tricks.com/tracking-clicks-building-a-clickmap-with-php-and-jquery/
Strong or Bold? http://www.think-ink.net/html/bold.htm
Like many of you I’m sure, I’ve watched my fair share of TV. For the last two and a half years though I’ve not had one. My occasional glimpses of whats on the box are during visits to friends and family. Still, I don’t feel this is a loss at all, when I want something to watch I simply use the all mighty Interwebulator. Not only does the BBC provide a fantastic service, there are many other places to get quality content. The fact of the matter is that I feel it has made me all the more selective about what I do watch. Yet another generic home improvement or reality TV show just doesn’t make the grade. Despite this I’ve still found myself watching some absolute trash, recent seasons of Heroes and Lost come to mind. But today I’m not wanting to talk about what is rubbish, I think you can decide that for yourself, I want to tell you about one of the best shows I have seen in many many years; The Wire
The Wire is at it’s most simplistic level a cops and criminals affair. Set in Baltimore, each season follows an ever expanding ensemble cast through different themes; drugs, the docks, politics, education and the media. The most striking aspect though is that a balanced amount of time is spent on each side of the different groups and equal measures of justice and injustice are received by both. Watching it you find yourself rolling through empathy, admiration and revulsion at both the prominent as well as the more obscure characters. You also find subtle points of interest are dropped in which later allow for little in-jokes for the more observant viewers. The Wire is a rich tapestry which doesn’t beg for your attention with tacky ploys like explosions or excessive violence. To the contrary, it is often quiet, considered and will punish you if you were not paying enough attention before. There are no neat, self-contained episodes like CSI or NYPD Blue, you need to watch it as a whole. Don’t let that put you off though, it pays back your efforts ten fold. If you only watch one TV show this year, watch The Wire.
This has caused me a problem though. I was fussy with my TV before, now my standard is going to be unbearably high. I hope that the next show made by The Wire’s creators, Generation Kill, will meet these expectations.
First thing you need is a favicon.ico file. There are all sorts of programs that, some free some not, that can do this job for you. Instead I’d recommend using a web service, favicon.cc.
Once you’ve saved your favicon and uploaded it to some webspace (however you prefer) then you need to link that icon to your code. This is pretty simple, just include the following code in the <head> section of your HTML:
Well, it’s been busy over the festive period. Back in Thanet for Christmas then straight to Jersey for New Years Eve. Home in Oxford now, it’s good to be back. I’ve got a busy semester coming so I’ve decide to just throw myself back into work. I’m planning on have my computing part of my dissertation finished by the end of January, thereafter leaving me eight weeks to write 5000 words on the open development of my computing dissertation in a suitably applied social sciences fashion. Lets start with a little open reflection what I’m constructing.
I am making a news and events information filtering web application. It works like this: News and event announcements comes in one end via submission, XML feeds (RSS, Atom, etc) and possibly some kind of easy tagging widget thingy. Once they are in people get to vote on which is the best story. We have some pages for displaying the popular stories which can be customised by the user based on factors like time or category. These customised filters can then be collected in XML, like Netvibes or iGoogle or just Firefox bookmarks. I’ll probably also throw in some social networking tools as well.
The site should be going live at the start of February and will initially be targeting the Oxford area. At roughly the same time the beta code (built using Ruby on Rails) will be made available on another site with a suitable open license.
I shall post further updates through January on this very blog.
I’m not going to give you a major post this week. I’m in the final stages of the semester so I’m having to do schoolwork. This week I am doing assignments on:
Political Situation In The UK
3000 words on the current political climate in the UK, includes social mobility from Marxist and Fiskian perspectives, political compass and Modernity via Giddens, language and power in the vein of Brodieu and power relationships in general.
Identity and Culture
3000 words looking at composition of identity by examining representative items. For this I’ll mainly be looking at sexual consumerism (bring on the Chomsky!) and post-modernity pastiche.
Next week I have two exams. One in Networks For Media which includes both wave form mathematics as well as computer networking structures. The other in Programming With Objects, which will include writing structural programming designs on paper (which will be odd).
As I’m sure you can image, I’m not going to be posting big next week either. Take care all.