Archive for May, 2009
HTML Doctype Selection
by Mike on May.21, 2009, under Findings, Web Development
There’s a lot of contraversy out there over what doctype should be used for HTML pages, the three main ones used are:
- XHTML Strict
- XHTML Transitional
- HTML 4.01
I think it’s fairly safe to say that the majority of the websites on the web use HTML 4.01, due to XHTML versions being more recent. But what’s the point of them all? Why can’t we just have one doctype and leave it at that?
Well, it’s all about standards. Without standards nothing would work properly, not just on the Internet, but anywhere. Take your car for example. If there weren’t standards for, say, tyre connectors then you wouldn’t be able to go out and buy any type of tyre for your car, you’d have to make sure the connector was the same as that on your car, this goes for everything. HTML is the same. There are new browsers cropping up every day, but the main five are:
- Internet Explorer
- Mozilla Firefox
- Opera
- Netscape
- and more recently, Google Chrome
If there weren’t standards then all these browsers wouldn’t be able to work. And as it happens, most work differently – thanks to Microsoft’s Internet Explorer, but that’s a whole other story.
Back to the doctype selection, there are supposed advantages to using all of the three doctypes mentioned, let’s start from the bottom.
HTML 4.01
This is the most lax doctype. Most things go here. So long as your elements are spelled correctly and you close quotes off (although you don’t have to have any at all) then your document will probably validate. Because anything goes this leaves a lot of interpretation for browsers. The developer may nest a load of elements together expecting one thing to happen but the browsers may all render completely differently.
XHTML Transitional
XHTML is a little different from HTML. The syntax is slightly different where by any elements with no content must be closed within themselves, for example:
HTML:
<img src="images/mike-griffiths.jpg" alt="Mike Griffiths">
XHTML:
<img src="images/mike-griffiths.jpg" alt="Mike Griffiths" />
Any elements that aren’t simply do not validate. There are also much tighter controls over things such as forms and what elements are allowed inside other elements. All attributes must be quoted correctly and anything that should belong in the <head> should remain there. All elements must be closed.
XHTML Strict
This is the most difficult to develop in, but not hard if you do things properly. As the name suggests, it is a much stricter document type. Everything must be in order for the document to validate. Because there are set rules to follow this means that the browsers should nearly always render what you want them to. There is always going to be issues with Internet Explorer but that’s what conditional HTML statements are for. However, I believe that this strictness is a little excessive. For example, it is sometimes necessary to open a page in a new window, this is normally done by adding target=”_blank” to the anchor (a) element – this will cause your document to fail validation, instead the W3C recommend using JavaScript – the obvious problem here being that the user may not have JavaScript enabled, so what’s going to happen to all those users? Just forget about them? Programming 101 – make sure the application works for all users – so clearly this is unacceptable. Another bad side is that older browser versions may have trouble recognising the document type and rendering.
All in all I believe XHTML Transitional to be the best document type – so long as you’re not a lazy developer and know your HTML and CSS well enough you should have no issues at all. The only bad side being older browsers may have issues rendering your elements how they want – but the likelyhood of your user having such an old browser is pretty low.
Facebook Framework
by Mike on May.20, 2009, under Findings, Web Development
As you may be aware from reading this blog I have recently been using the Facebook Framework to develop two applications, Football Badges and University Badges. At time of writing both applications are doing reasonably well – Football Badges has 1,100 users and University Badges has 30 – but University Badges was only accepted into the application directory a few days ago.
While using the framework the main issue I found with it, as with a lot of frameworks and APIs, is the distinct lack of documentation. I have experience developing with a lot of different web applications, and it’s never normally a suprise to find something poorly documented, but I thought something as mainstream as the Facebook Framework would be an exception. Although there is documentation available, it is in the form of a wiki – which can work fine, but this wiki is clearly not maintained very well and is left up to developers to guess a lot of the frameworks functionality. Take for example the page that is aimed at helping developers to create a box on users profile pages, the majority of the wiki page is taken up by a huge conversation had on the Facebook IRC help channel on Freenode where a user was trying to update their profile box. Where this may be a little helpful, it’s highly unprofessional. All Facebook needs to do is to donate a few days of one of their framework developers time to properly write up the documentation and they will likely attract hundreds of new developers and successful applications.
One problem I have also found with the framework is the way it handles user profiles. Everything is cached on Facebook’s servers before it is shown on the users profile page, this greatly limits the kind of applications that you can create. For example, if I want to create an application that keeps track of how many visitors a user has had on their profile, I would normally display a 1×1 transparent gif and track how many times it is loaded from my server, but because everything is cached on Facebook’s servers it will only ever be loaded once from my server. You can only use set HTML items too, I fully understand the reasoning for this, as otherwise applications would go overboard and Facebook would soon turn into MySpace, but perhaps Facebook could grant additional privledges to trusted developers to try and enhance the users experience.
Another problem is that users must actively choose to add an application to their profile page. This is probably for the best as otherwise all applications would add huge boxes to user profiles to generate more traffic. It does, however, pose problems for applications like mine that are based around the profile page. It can be very mis-leading to a user, let me explain: A user see’s my application and adds it. Any normal user would now think they have a Football Badge on their profile page, they’d be wrong. The user then has to click the ‘Add to profile’ button on my applications pages. I have made it blindingly obvious what to click to try and ensure 100% of my users do it, but it does divert attention away from the application itself and is an unnessesary step for applications like mine.
I have also noticed some problems with the frameworks deployment. My applications are relatively small in comparison to a lot of the applications out there, but I too have noticed problems. The servers don’t seem to be kept up-to-date, especially recently. I have around 1,100 users on my Football Badges application, normally I get around 15 new users a day. Last week there were reported to be no new users, then this week there were 150 users added in a day. I doubt this is an anomally, especially after scanning the forums and finding a lot of others having the same problem, some of whom are developing applications with millions of users, not thousands.
A lot of people have raised concerns about privacy issues with the platform. Anyone can apply for a developers license and it’s all automated so there is no vetting. You only need 20 users in order to submit the application to the app directory so that it is searchable and addable by all. Once you have your developer key you gain access to nearly every piece of data Facebook has on their users, this seems like a massive concern. However, I don’t see it that way. Users must grant privledges to the application before it can access anything. The user can also limit what the app can see and use. Even if the user grants the application full access, it will only be able to use what friends can see on their profile so for the majority of users, this isn’t even an issue. I can, however, see a problem for the security conscious. Facebook allows users to pick whether their profiles are crawlable or not by Google and other search engines. I personally chose to hide mine. If an application is granted privledges to access that user data there is no telling what they can do with it. The developers can easily create an application that stores your information on their servers when you access one of their application’s pages and there is no way of stopping them.
With all that said the Facebook Framework is very fersatile and does allow developers access to user data in a relatively safe way. The amount of applications that could be developed are endless, even with the profile restrictions in place, and the platform has paved the way for many new businesses. I myself have made money from these two small applications, so it clearly works. I just hope that Facebook decides to put some time into their documentation sooner rather than later.
OpenBSD Europe
by Mike on May.14, 2009, under Web Development
OpenBSD is a secure and fast Unix-like operating system. The OS is open-source and emphasis is always on security. I have been commissioned to make a website, CMS and E-Commerce presence for a relatively new business, OpenBSD Europe. The website itself sells CD sets of the free operating system.
The work includes making the design, slicing it into valid table-less XHTML, creating a secure CMS where the author can easily edit the content (including products and pages) and optimising the site for SEO.
Originally the site had several nice jQuery visual effects, but due to cross-browser compatibility issues these were removed. The site features a twitter script I created that pulls the lastest twitter post from the company.
OpenBSD Europe – Buy OpenBSD CD sets
Tech and Techno – A music blog
by Mike on May.09, 2009, under Music, Web Development
Tech and Techno - A music blog
I was recently commissioned to create a music blog for somebody. I love my music so I jumped at the chance. The blog is simply a themed WordPress designed by myself with some help from a friend.
The blog itself concentrates on the techno, electro and house genre of music. There are plenty of blogs out there that do this already – but this one is different. Every week since the blog began the author has interviewed a big name in the industry and this has made the blog very popular in a short amount of time.
It’s worth a read and even a bookmark.
Tech and Techno – A music blog
An Interesting Problem
by Mike on May.07, 2009, under Web Development
Myself and another developer have begun work on a new project that will integrate into Twitter. It’s quite a novel idea and I’m very surprised it hasn’t been done already, but there will be more on that once it’s ready for public use.
But enough on that, this post is about a problem we came across when building it. Basically we wanted to create a block of 100 cells, each numbered, but the rows are to go in a zigzag fashion, starting in the bottom left at 0 and ending in top left with 100, and obviously this isn’t to be done manually. Find an example below:
100 99 98 97 96 95 94 93 92 91 81 82 83 84 85 86 87 88 89 90 80 79 78 77 76 75 74 73 72 71 61 62 63 64 65 66 67 68 69 70 60 59 58 57 56 55 54 53 52 51 41 42 43 44 45 46 47 48 49 50 40 39 38 37 36 35 34 33 32 31 21 22 23 24 25 26 27 28 29 30 20 19 18 17 16 15 14 13 12 11 1 2 3 4 5 6 7 8 9 10
Here is what I came up with (PHP):
$i=99;
for ($x = 100; $x > 0; $x--)
{
echo $x . ' ';
if($i%10==0) {
// Display new line
echo "\n";
// Loop through 10
for($y = ($x-10); $y < ($x); $y++){
echo $y . ' ';
if($y%10==0) echo "\n";
}
// Add ten onto $x and $i
$x = $x-10;
$i = $i-10;
}
$i--;
}
Although this is relatively efficient, I'm sure there must be a better way of doing it. Any ideas? Leave a comment.
Rugby Feeds
by Mike on May.07, 2009, under Projects, Web Development
The latest addition to the new sports feeds network is Rugby Feeds which I put live late last night. Similar to Cricket Feeds and the ever-increasingly popular Footy Feeds, Rugby Feeds will make an excellent addition to the network.
My next job is to create an RSS aggregator which will take all of the stories from the different feeds and create one comprehensive feed – the trick here is to make sure stories aren’t repeated… tricky.
Rugby Feeds – Rugby news to your screen
Uni Badges
by Mike on May.04, 2009, under Projects, Web Development
After the success of the football badges application I thought I might branch out a little. I have created the ‘Uni Badges‘ application. Essentially it’s exactly the same as the football badges application, only it displays your university badge rather than your favourite football team’s.
I don’t for one second think that this will be as popular as the football badges but it will be interesting to see the contrast in active user levels between the two. At time of writing this application only has 19 users, which isn’t enough to submit the application to the public listing directory – so unless someone knows where to look, they’ll never find it. Hopefully someone will add it soon so I can submit the application. You can get it on it’s application page on Facebook.
Uni Badges – Display your university’s crest/emblem/badge on your Facebook profile
Football Badges
by Mike on May.04, 2009, under Projects, Web Development
Facebook is a huge website that, unless you’ve been living under a rock for the last 3 years, you will have heard of. The original concept was simple; everyone has an account and can add pictures, users can then comment on other users profiles and pictures. This is the theory of social networking. It’s a very simple idea and a lot of sites have tried copying it, with not a lot of success.
More recently though the Facebook platform was released. This is essentially a framework that allows developers access to the data on Facebook, but of course the user has to agree to allow access to this data on a per-application basis.
There have been all sorts of success stories in the press about applications built on the framework so I thought I’d give it a go. I wanted something simple that would allow me to get knee deep into the framework straight away, but not cause me too much stress. I chose to create ‘football badges‘.
The idea is a simple one. The user adds the application and can select their favourite football team from a drop-down list (which is pulled from my database), this in turn will display that teams emblem / badge on that users profile page. Easy.
I have mixed opinions about the platform and it definitely needs a lot of work, but as a whole it is an excellent development medium and I’m sure there will be a lot of useful applications cropping up sooner rather than later.
As of writing my application had over 900 active users – which is quite impressive considering it’s only been live a week or so. Let’s hope it’s growth continues and I’m able to make at least some money from it! You can add the application from it’s ‘about page‘ on Facebook.
Football Badges Application – Add your teams badge to your profile
Cricket Feeds
by Mike on May.04, 2009, under Projects, Web Development
In addition to the Footy Feeds website I have also created the Cricket Feeds website. The design has been kept deliberately similar. If the website proves to be popular then other sites will be added to the network, possibilities include Tennis feeds, Rugby feeds and sport feeds – the later encompassing the most popular feeds from all of the sports.
As I have said in my previous post, if the site(s) prove to be popular I will add additional functionality, allowing regular users to change which feeds they see and add their own. I’ll also create an RSS feed of all of the feeds I load in, allowing the user to use their own RSS reader rather than being limited to my website.
Cricket Feeds – Cricket news to your screen
Footy Feeds
by Mike on May.02, 2009, under General, Projects, Web Development
Love football? I know plenty of people who do. One problem is though, there isn’t one central place where you can get all the news about the football world. Sure you can go to the BBC news website and see some of the news, but this isn’t everything. I spent five minutes visiting various sites and I noticed that if you want to know everything then you need to go to at least 4 different sites to get a comprehensive look at it all.
This is where the idea of Footy Feeds has come from. Essentially it’s just an RSS aggregator, grabbing news from various websites and displaying the ten latest posts all in one place – but it’s very useful. I’m not a huge football fan and I still use it.
At the moment the site is based on four set feeds which are the one’s I found to be the best. However, if the site takes off a little I will make it customisable, allowing the user to add as many feeds as they want and allow the user to select which feeds they want to display from a set available, or alternatively set their own feed URLs.