Archive for Web 2.0

Project Overview

My project ‘WordPress Theme’ is well underway, so I thought it was time for an overview of were I’m at and what’s to come.

My theme was meant solely for this blog at the beginning of the project. But as I started to look into other collaborative blogs I found that other collaborative blogs share the same problems as our blog. – No real overview of the latest posts and long columns of categories.

Often the volume of postings on these blogs makes it difficult to quickly get an overview of the latest entries, – and even harder to find the latest from your favourite author.

My proposal is now to create a theme aimed at collaborative blogs. The front page will be very different from the independent blog posts as it will serve as an overview page. It will show extracts from the latest posts in two columns making it easier to see without having to scroll as much. The categories are placed horizontally at the top providing quick access to the navigation.

Every author will have the possibility to upload a photo that will be shown next to their posts. This will give visitors a quick visual reference when scanning the page for posts from a specific author. Underneath the posts on the front page will be a horizontal sidebar. The widgets that normally go in the sidebar have been moved underneath the main content; I have changed the layout to be horizontal instead of the normal vertical sidebar.

The single pages are more like normal blog post pages. They will have a two column layout and the comments beneath the main content. I have done this mainly because people are familiar with this style which will make usability easier. Secondly there won’t be as much content to deal with on individual pages. Its main purpose is to isolate the single post and let people comment on it.

Colour Scheme

The colour scheme of the website is a chapter on its own. I really struggled to come up with a decent colour scheme. I even at one point thought of providing different colour schemes and let the user select which one to use. I knew from the beginning that I wanted black text on white background no matter what. As this is theme it has to fit many different web sites and a lot of different content. A white background ensures that most images and content will stand out on a bright background that gives good contrast.

The colour scheme went from brownish to green before I finally settled for a variation in blue. I will spare you all of my hair tearing thoughts of the process and just show the different mocks I came up with.

1mockup 2green-mockup1 3green-mockup-single 4blue-mockup 5blue-mockup-single

/Kasper – on Twitter and Delicious


Why choose PHP?

There are some compelling reasons to work with PHP. For many projects, you will find that the production process is significantly faster than you might expect if you are used to working with other scripting languages. PHP is used in-order to see results quickly without sacrificing stability. As an open-source product, PHP is well supported by a committed user community and can be run on all the major operating systems and with most servers.

AS PHP allows you to separate HMTL code from scripted elements, you will notice a significant decrease in development time on most projects – an area that drew my attention when researching PHP and its performance. I run on an Apple Macbook at home and was unsure of whether it was possible to run PHP on Leopard. However, I since discovered that it is designed to run on many operating systems and to cooperate with many servers and databases. (It runs on the Windows operating system, Linux and Macintosh OS X). Support is also provided for a range of web servers such as Apache, Microsoft Internet Information Server, Website Pro and more. This is an area I shall discuss further in my developed proposal, as I can draw upon how I can test a project with personal web server and install it on my Macbook accordingly.

Understanding Widgets – My Next Step

I have never really thought of what widgets where, even though I have used them on many occasions. I have used WordPress to create many websites, and customized themes in all kinds of areas. Normally though, I just create my own template files within the WordPress theme folder and just hard code all the “widgets” like categories and blogroll into the template files. Unfortunately it’s not that easy when you are dealing with a complete WordPress Theme.

If you want to make a theme popular there are a few things you have to keep in mind. WPDesigner has a nice list of stuff that can help make a theme more popular. Number three on the list is:

Is it generic? Your free theme will not be used by one client. It’ll be used by thousands of clients. It’s very important to keep all features generic. Stay away from hard-coding anything and stay away from too many non-customizable graphics.

Generic is probably the single most restraining word when designing themes, they have to be fluid and able to accept the most ridiculous content. You never know if someone wants to call their blog: (Yes that is actually a working URL, and a village in North Wales). Returning to Widgets, you have no control over what widgets are going to be used with your theme, there a many widgets available to choose from, but the most common are: categories, archives, blogrolls etc. To quote one more of the important popular theme steps:

Is it widget-ready? The widget plugin now comes with WordPress so this is an obvious one. There’s no more reasons to not widgetize your theme.

Automattic has some great info about making your theme widget ready which will come in useful. Making a theme ready for widgets is all about wrapping code in CSS classes and id’s and then have some kind of uniform styling for them. What I’m most concerned about is that widgets can contain so many elements from text to images, and that might make the horizontal division hard. It will at least be hard to make it look good.

/Kasper – on Twitter and Delicious

Where am I now?

During todays class, I presented my recent findings on PHP, discussing what it’s all about and why it may be useful for my website. I discussed what attracted me to its purpose and the possibilities of embedment into HTML, thus providing the initial framework for my website. After my discussion, I was given recommended feedback by the group, one idea being to perhaps try and develop the RSS feeds I intend to use around PHP scripting. This is something I shall definitely consider when beginning the next stages of production.

Previous skills of mine consit of basic HTML, CSS, tables and some minor flash work. Considering these skills, I intend to further my knowledge on new areas such as PHP, in-order to benefit any future design I carry out. My plans now, are to practise PHP after a coherent understanding of how and why it will benefit my website. I shall do this at home through the use of draft templates designed through Dreamweaver, Adobe Photoshop and Fireworks. By testing the PHP in conjunction with the RSS feeds I wish to incorporate, I gain an advantage as to any problems that may occur during later production stages.

I have also been recommended a book by my tutor, useful in explaining everything I need to know on PHP. I am to begin my drafts throughout the run-up to next class, after conducting further background research on websites such as:

An Introduction to…


PHP, (originally standing for Personal Home Page Tools), stands for PHP: Hypertext Pre-processor.

It is a computer scripting language, originally designed for producing web pages. Having evolved to include a command line interface capability, it can be used in standalone graphic applications (a type of user interface). Created by Rasmus Lerdof in 1995, it was released under the PHP License, where the Free Software Foundation considered it as a free and acceptable piece of software. The Free Software Foundation is a non-profit corporation, supporting the free software movement in prompting the universal freedom to distribute and modify computer software without restriction.

PHP is a widely used general purpose scripting language, especially suited for web development and can also be embedded into HTML, (the predominant language I have constructed my previous WebPages with in the past).

It generally runs on a server, using a PHP input code with an output consisting of viable web pages that may be viewable worldwide. It can be deployed on most web servers and on almost every operating system and platform, free of charge.

Being fairly new to the concept of PHP, I was interested in understanding how it may well be beneficial for use with the design of my website on music news and culture. As I have a fairly precise knowledge on the use of HTML, I wondered if it may be possible to embed PHP into a regular HTML document.

After some reading around on the Internet, I discovered a very helpful source that explains how to do so:

Considering my website will be constructed through the use of HTML and the incorporation of RSS feeds, it may well be ideal in using PHP to help enhance the final outcome and design of my site.

Below is an example of PHP embedment in HTML:

An introductory example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

echo "Hi, I'm a PHP script!";


(Taken from:

I discovered how PHP is mainly focused on server-side scripting, enabling the possibility to collect form data, generate dynamic page content, or send and receive cookies. But PHP can do much more.

There are three main areas where PHP scripts are used.

  • Server-side scripting. This is the most traditional and main target field for PHP. The PHP parser (CGI or server module), a web server and a web browser allow this to work.
  • Command line scripting. It is possible to make a PHP script to run it without any server or browser. You only need the PHP parser to use it this way.
  • Writing desktop applications, (although not recommended as I am not too familiar with PHP as yet.

Hope this brief introduction to PHP has been informative! I shall complete further research at home, thus ensuring I gain a more coherent understanding on PHP, deciding whether it will be useful in using in conjuction with HTML and the design of my website.

An Introduction to Wireframes

Initially this post should have been titled: “An Introduction to WordPress Themes”, but I felt like I had covered the basics of WP themes in my earlier post. So this is going to be an introduction to Wireframes.

Wireframes are basically the blue print of a website; it doesn’t contain any colour or design features. It is very handy to give yourself and a client an idea of how the final website is going to be. By agreeing on a layout early on in the process, you won’t have to deal with unhappy clients and unlimited revisions later on. Wireframes also allows you to give priority to the actual content, and where to place things like logo and navigation on the page without being distracted by colours.

Wireframes can be as simple as you want them, some people draw them up on paper and leave it there. Other people like me, do them in Photoshop or Fireworks. There are a few examples on flickr that can give you an idea of what it is. The way I do it is to make a list on paper where I write down every important item that should be on the website. Then I Take a mental note of what is the most important, this is mostly the main content, navigation etc. I make some notes about how I would like the layout to be, I usually take a tour around the web to find inspiration. I like to sketch it up on paper before making the final wireframe in Photoshop. I usually just draw very simple shapes and write the dimensions down. (Click to see large version.)

What I specifically did, was to look at the Web and New Media Blog and take a note of the main points. I counted the categories which had the most posts, I did this to figure out what the overall theme for the site was, although I did know this already… Always good to be sure 😉 – I then wanted to find some inspiration, which is why I started looking for other “collaborative blogs” about the web and technology in general. Some of which I liked were Lifehacker, TechCrunch and ReadWriteWeb.

The main challenge was to find a way to make the categories easy to navigate without having to scroll down to the bottom of the page. The nature of collaborative blogs is that they cover a wide range of topics and visitors should be able to find what they are looking for as easy as possible. Which is why I have cut the posts short and provided a ‘read more’ link, to quickly navigate the latest entries?

The other thing with WP Themes is that your creativity is somewhat limited. Because it is a theme it has to be generic in any sense. This means that you can’t just have an image instead of the masthead, it has to contain text as it has to fit nearly every possible blog title.The same is true for the widgets at the bottom, you have to make it as generic as possible, because you have no idea of what kind of content is going to be used.

The final Wireframe:
I’m not entirely happy with it yet, and might make some changes as I go along. I’m especially not happy with the bottom part, but I don’t know what to do about it yet. (Click to see the large version.)

/Kasper – on Twitter and Delicious


During todays class, I was informed of the ‘scammper’ technique useful in gaining original and creative concepts for my website design. As previously mentioned, my website shall be based on music culture and the consumption of records, incorporating the use of RSS enabling frequent news updates to user blogs,  e-mails, etc.

Below is an example of the scammper technique I applied during today’s class, looking at an existing website (I wish to take ideas from) operating in the marketing and selling of vinyl worldwide:

Substitute – To create something original for my website, I would substitue areas of the rules specified on discogs and also allow the exhange of records, as well as the overall concept of purchasing records at a fixed price.

Combine – I would combine the use of RSS feeds to records for sale within musical genres, delivering users with the latest sales/exhanges immediately appropriate to their music tastes.

Adapt – I would consider adapting the concept of discogs, applying the idea to my website but also refer to music news and culture as the main theme. The idea of using the discog theme would create an online record store that allow users to interact within a social network.

Magnify – (no ideas as yet)

Modify – I would add audio to the interactive record store concept taken from discogs, thus allowing users to stream audio clips of records they may be interested in purchasing / exchanging.

Put – (no ideas as yet)

Eliminate – By substracting unneccessary textual information,  it would help clean up the overall text:image ratio, creating a more simplistic and easier interaction for users.

Reaarange – I would change the layout of discogs into a theme appropriate to my website,  creating a simple and understandable, interactive online record shop.

More ideas to come.

rough ideas

I’ve chosen to study this module in-order to improve my skills on web design and gain beneficial techniques for future web design I intend to complete. Early ideas for this assignment are to create a website focusing on urban music/culture/fashion with regular updates and news to appropriate audiences. With the use of RRS feeds, I intend to incorporate relevant topics on the cultures and scenes focused on, also including video, mp3 and other media associated content. Ideas are  still rough at the moment, I may base the website on a specific genre of music that is popular amongst communites, whom each share a strong presence on existing forums and sites online.  Perhaps gain user interaction with forums, in which it will be possible for readers to discuss and share topics in a social networking style? As I said, ideas are still rough but after some further research I will come up with something solid!

Project Report – Azeem Ahmad

My project will be live and online from tomorrow (11/01) at (it will be at the bottom) – I chose this website as I did my work experience there, and I am on personal terms with the admins there, so they kindly agreed to host my project for me at short notice.

My final project is not what I originally intended as I had planned to host it myself on my own website, but other circumstances have led to having me change my project and its location in order to meet the deadline on time. I have still managed to amalgamate the four websites RSS codes into one through manipulation of them, one by one. The unique source code that I made is still available however, and will be part of this project.

User Testing, and Accessibility

I managed to get the product tested by the administrator of the website, who found the concept good, and said that it was easy to use. He did say however, that once he was re-directed to the ‘holding’ website, HitRSS, that it became a bit difficult to use. I overcame this by making the link to the news websites more prominent on the RSS Blog, therefore making it easier for the user(s) to access the news they were originally after.

Ideally, as mentioned earlier,I would have liked for the product to be hosted on my own website. I do feel however, that it is easy to access on the FleetBuzz website, as it is placed with all of the other external links. If I had more time to do this project, or to do it again, I would invest more time in advertising and promotion of my product, in an attempt to compete with its bigger competitors.

Skills and Development

When I started this project, I had a very basic knowledge of RSS. I knew what RSS did, but I never understood how it worked. During the course of this project I now feel that I have an excellent knowledge of RSS and its capabilities, and how RSS itself works. I am now able to de-construct an RSS reader, explain what part of the reader has what function. I also understand RSS as a language, and I have demonstrated during this project that I have achieved skills which will make me more employable in the new media industry, but also as an online journalist too. I have skills which enable me to become an online journalist, or to work in the new media industry.

Ideas for development

This project could easily be developed into something much more bigger given more time. It could easily be developed into a website of its own, even created using Flash or JavaScript language, making it more contemporary.

It could also offer users the chance to subscribe to the site, and offer their own websites and links for RSS amalgamation.

The site could also become ‘wiki’ style, giving users the chance to log on and edit parts of the website themselves, making each user a personalised home page. Each of these technologies embrace the web 2.o ethos, and have scope for potential future development.


Learning MySQL/*First what needs to be done is to create a database for users to store the table; in order to do this enter*/CREATE DATABASE (database name);/*example CREATE DATABASE members;*//*next is to create a table within the database, to do this select the database you wish to use, for example ‘members’ typing ‘USE members’ into MySQL. Then type*/CREATE TABLE `members` /*to create a table called MEMBERS*/(
`id` int(4) NOT NULL auto_increment, /*sets up the classification and

`username` varchar(65) NOT NULL default ”, /*setting up the username variable and allowing a maximum of 65 characters*/

`password` varchar(65) NOT NULL default ”, /*setting up the password variable and allowing a maximum of 65 characters*/

PRIMARY KEY (`id`) /*ordering of the table by listing them in the order they sign up for the website, in this case by ID NUMBER*/
) TYPE=MyISAM AUTO_INCREMENT=2 ; /*not to sure what this does however in my case the coding didn’t work*/

— Dumping data for table `members`
INSERT INTO `members` VALUES (1, ‘john’, ‘1234’); /*this is setting up the user data into the table*/ ALTERNATIVE CODING THAT DOES WORK FOR MYSELFCREATE DATABASE members;USE members;CREATE TABLE tblUsers(
/*alternative to PRIMARY KEY(id) as labelled above*/
UserName VARCHAR(65),
UserPassword VARCHAR(25),
UserEmail VARCHAR(255));
All MySQL Coding is like actionscript in the sense that it is in between the (   ) brackets instead of {  } that actionscript usesINSERT INTO tblUsers (UserName, UserPassword, UserEmail) VALUES(‘Marc’,’1234’,’’);

« Previous entries