Tutorialzine - PHP MySQL CSS jQuery XHTML tutorials, resources, roundups and freebies. The answer to your development needs.

The steps

There are a few basic steps, that are common for every new web site before any real development has started. Missing them is like playing a russian roulette with a fully loaded gun – it will surely come back to you no matter how good you are. The first and most important of them is carefully planning of all the features the site will encompass. This ensures that you don’t invest any of your precious time into building features, that will get scraped later.

In our case BloggyBits started as an idea for a neat little Flash widget, that would be a great addition for any blog – you just put it in your sidebar, and it shows all your latest doings with its flash goodness.

A great thing about such an idea, is that it promotes itself (the second most important thing in web development, apart from building the site itself) – a lot of people will see the widget somewhere and put it in their own site, thus further promoting it. At least in theory – lets not forget that they must be really impressed with it.

Of course, the widget cannot exist on its own – we need a way to let people configure and generate the code, read some info, leave us feedback and edit the widget later on. This calls for a site that will be the home of the widget, that must be able to meet all of the above requirements, and share the principles that stand behind the widget itself – clean design and simplicity.

Create a mind map

Now that we have an idea of what lies ahead, we must somehow create a mind map, along with some technical logic, of  our masterpiece to be.

Our mind map of the basic principles behind the site

Looks great, but what does it all mean? Well, here we have the basic layout, organized by the PHP back-end. Some of its functions:

• It updates the local data storage with a user’s latest activity on the social sites, that he has chosen (by scanning through RSS feeds);
• The back-end presents the flash widget with a properly structured (XML) representation of all of your activity, and the widget configuration;
• PHP manages the generation of the widget and the changes made to it later by the “edit” functionality;
• It handles the bloggybits.com website.

The flash widget is a front-end that presents the data to the user in a friendly way, and schedules updates to the data in an asynchronous way (we’ll get back to this in details in the next tutorials).

What we learned?

If we can summarize it in a single sentence – don’t start programming and designing before you’ve thought over the main aspects of the site, or you risk wasting your (or your client’s) time.

What is next?

We can continue with the cornerstone of  web design – the design itself (duh). Both the widget and the site must have a stylish and clean look. No matter how impressive your back-end code is – if you have a bad design everything is lost.

Here is a quick preview of what we’re doing next time.

The design

Related: