Archive for the ‘Website Design’ Category

Microsoft Institute of Technology

Colleges Need To Align To Industry

Microsoft has a tight grasp on Institute of Technologies, and it’s choking the life out of the students.

The vast majority of computer science based courses in Ireland focus largely on teaching Microsoft technologies to the students, despite the fact that they’re only used in niche areas of the industry.

Ever thought about using VB Script as your client side scripting language? Of course not, it’s only supported by Internet Explorer. Want to build a web application powered by Microsoft Access? Don’t even think about it, it’s got a total absence of security features. Oh and it’ll also collapse in on itself with just a handful of simultaneous users. Want to build a web application with ASP? Don’t even bother, ASP is a joke.

Here’s a list of the typical technologies covered in computer science based courses in Ireland right now:

  • Microsoft ASP
  • Microsoft Visual Basic
  • Microsoft Batch Scripting
  • Microsoft Access
  • Microsoft SQL Server
  • Microsoft Active Directory
  • Microsoft VB Script
  • Microsoft IIS

Do you see the pattern here?

Microsoft has it’s fingers in all the educational pies across the country that teach the next generation of IT workers and they know exactly how to maximise the use of their technologies in industry: to get’m while they’re young when they don’t know any better. But the reality is that these technologies are not used by the majority of Irish companies in the web industry. In the job market there’s only a minuscule portion of employers looking for graduates with skills in these areas.

Adjusting for the Industry

For college graduates, the majority are blissfully unaware that they are now armed with a set of useless skills that have no practical use in the real world. It’s only after a few job interviews and a rude awakening do they realise that the last four years has been spent learning skills that are worth almost nothing in the work place. They now face the long hard struggle of relearning everything all over again, getting to grips with the actual technologies used in the industry.

Here’s what that the above list should have looked like:

  • PHP
  • Java
  • Perl
  • MySQL
  • Oracle
  • JavaScript
  • Apache

But it a seems that unless you can provide lucrative course sponsorship or another similar type of sweetener, big businesses such as Microsoft, will win the syllabus wars over open source technologies for as long as colleges find the lure of the greenback more appealing then providing their graduates with real industry strength skills.

Better Doesn’t Mean Harder

Learning the industry standards, isn’t any more difficult or doesn’t take any longer then learning the poorer Microsoft alternative. It simply means a shift in the content of the course syllabus. Why spend time learning ASP and Access powered web applications when you could just as easily learn how to make a scalable, well structured PHP, MySQL powered web app? It makes no sense.

Calling All Students

If there are any students reading this doing an IT based course, then please consider going to your course director tomorrow morning and ask him/her why there are so many irrelevant Microsoft technologies taught in your course and request that a larger emphasis be put on open source technologies instead. It’ll save you having to relearn what you thought you knew, on a platform that’s actually used in the real world.

Adding a Comment Button to your Blog

How to Add a Comment Button to your Wordpress Blog

As a follow up from my previous post, I’ve put together this quick guide on how to add a comment button to your Wordpress blog.

It’s a fairly easy process that should only take about five minutes.

1. Save Your Button to the Web Server

The first thing you need to do is select your favourite button. I suggest picking one that fits with the existing colour scheme of your blog site. Try to avoid adding a button with a colour that clashes with the rest of the colours on your site. I know you want people to notice it, but you don’t want to blind them!

Once you’ve picked your favourite button, use an FTP program to upload the button to the image directory within your theme folder. For example, the image folder of Wordpress’s default theme is located at:

/wp-content/themes/default/images

2. Edit Your Theme

Once you’ve uploaded the button to the right directory, you need to add the code in your theme to display it.

In Wordpress, each theme is made up of a variety of different files. But we’re only interested in the one named index.php. Open this file in your favourite editor and find the line that looks like this:

<div class='entry'><?php the_content(); ?></div>

Directly after it, add the following code:

<div class='commentPrompt'>
<?php
comments_popup_link(
  "<img src='/wp-content/themes/default/images/comment.gif' />"
, "<img src='/wp-content/themes/default/images/comment.gif' />"
, "<img src='/wp-content/themes/default/images/comment.gif' />"
, "commentPromptLink","Comments Closed");
?>
</div>

Remember to replace the URL in all three places to the location of your own comment button.

If you would like to know the full meaning behind this code, visit the official Wordpress documentation for the template tag. It’s very well written and doesn’t assume that the reader has previous coding experience (provided that you start at the start).

3. Add Some Style

If you look closely to the above code, you’ll see that I wrapped a div tag around it and gave it a class name of ‘commentPrompt’. This will allow you to add some style to the area directly surrounding the button and help integrate it with your theme’s original design.

For my own blog, I’ve centered my comment button within a box and given it some padding and a dotted border, but I’d encourage you to try your own design so it looks ‘at home’ in your own blog’s design.

Here’s the CSS code I used for the box surrounding my comment button:

.commentPrompt
{
    padding:10px;
    text-align:center;
    border:dashed 1px #FF6600;
    background-color:#fefee2;
}

Well that’s about it. Hopefully this has been helpful. I’d be delighted to hear from anyone who found this code useful.

Comment Buttons for All

To the untrained eye knowing where to add a comment on a blog can sometimes be difficult. Darragh Doyle has done a great job outlining it here.

After reading his post, I added a large new shiny button to the bottom of each of my blog posts encouraging readers to leave a comment.

I’ve been prompted to release more of these so that other site owners can use them on their own blogs, so I’ve designed the button in various colours and sizes and wrapped them up in this zip file so that anyone can add the buttons to their blog and hopefully encourage more people to post more comments.

Let me know if they’ve been of any use to you, and feel free to distribute them to others too.

Franchising Website Design

Restaurants do it, printers do it, and even gyms do it. Looking around, it seems that almost every area of commerce has some sort of franchising opportunity available. So why aren’t there more in web design?

As far as I can tell, there’s no good reason why it hasn’t happened.

A Perfect Fit

I think that the area of web design is a perfect franchising opportunity. Granted, it’s a skill that needs to be learned, and you need a certain flair for creativity, but you also need a solid business plan and a sound strategy for success. A franchise in web design could provide this to freelance website designers struggling with the business aspect of their endeavours.

A typical franchise provides:

  • Permission to adopt its valuable brand
  • Usage of its proven business model
  • Support and Training
  • Pooled advertising funds
  • Access to established products and services

Stick to What You Know

From my experience, web designers are great at creating interesting websites and beautiful graphics, but not so great at running a business. A franchise could help with this aspect of the business.

The most difficult parts of setting up a web design firm are, in my opinion, the following:

  • Getting legal contracts drawn up (maintenance contracts, terms and conditions, software licences, etc.)
  • Generating best practices for business (lead generation, advertising, tendering, CRM etc.)
  • Creating a sound pricing structure (with recurring revenue streams)
  • Paper trail workflow management
  • Company branding

These are the kinds of things that could and should be provided by a good franchise.

Hit and Miss

Searching through Google, there seems to be a few companies offering this type of service already, but none of them have convinced me that by buying their franchise I would be any better off then if I went out alone.

What’s needed, is a strong brand with a proven track record to put together all of their successful business practices and package it up as a franchise offering. Allow the franchisee to sell their CMS or e-commerce package, and to use their legal documentation, and to adopt their best practices for lead generation and to pool their advertising budgets.

In return, the franchisee would pay an initial purchasing fee and a royalty from their gross monthly revenue (in 2006 the national average was 6.5% - Franchising in Ireland 2006 - PDF). Often, there is also a pooled advertising fee (typically around 2%).

Possible Opportunity

If there are any existing web design franchises that I’ve overlooked, please leave a comment and let me know. But to be honest, I think a franchise in web design is a great opportunity for some of the more established design firms to expand their brand and make some profit at the same time.

Heck, if someone else doesn’t do it soon, I might even give it a go.

Building Web Applications My Way

Web Development Tools

There’s a huge range of excellent tools available to developers to help them build their next big idea. Over the years, the tools I favour and the way in which I use them have had to be constantly updated. Some of this was due to improvements in technologies but more so it was because I’m always looking for the best way to build web applications.

Often the changes in my approach are borne from wanting more re-usable code. Sometimes it’s because it’s simply a more elegant way to do it, and other times I update my approach because I just want to learn. Here’s a quick look at how to build web applications my way:

Design

The first stage to creating the app is to get a good feel for what it will look like, and the best place to do that is in your favourite graphics package.

  1. Design the Dashboard/Homepage as a graphic.
  2. Use the new design to determine what parts need to be images and what can be styled as CSS.
  3. Cut and crop the necessary images.

Prototype

Before a database has been designed and before a single piece of programming code has been written, I always do a prototype. I code up the XHTML/CSS of how the app will look based on the design done in Photoshop. Even the parts that would normally be generated by the database are hard-coded into the page. This might sound like a fruitless task, but changing data fields or your application structure is far easier at this early stage.

To simplify the structure of the code and to help keep the PHP separate from the XHTML I use Smarty. It’s quick and easy to learn and makes development easier and maintainable.

  1. Setup a new instance of the Smarty Templating System.
  2. Create a template page and CSS file.
  3. Hard code everything into it including data that will eventually be dynamically driven.

Control

I’m a huge fan of the MVC approach to development but rather then use an existing framework, I tend to write my own as I need to. This gives me ultimate flexibility and freedom to create whatever I like. The ‘C’ in MVC stands for controller, and that’s what I create first. It forces me to think carefully about what the application really needs ‘underneath the hood’.

  1. Think about what the application needs to do.
  2. Write the controller as if all the classes and methods already existed.
  3. Output to the templates.

It’s About Class

Once the templates have been coded and the controllers have been fleshed out, I then go about writing the ‘engine’ behind the scenes. Doing it in reverse means that I have more flexibility during phases of the project where I need it the most.

  1. Write the main class to act as the application controller.
  2. Create a new class for each object within the application (such as a user, a report, a customer etc.).
  3. Re-use classes and plugins wherever possible.

Database Design

When I started out designing web applications I would always create the database first and work from there, but now I’m certain that doing it in reverse and building the it last is by far the better way. So, based on the needs for tables and fields which undoubtedly arose during the class creation stage, these can now be built into the database.

  1. Determine what tables and fields are required.
  2. Give plenty of thought to normalisation and keep redundancy to a minimum.
  3. Build the database. MySQL is my engine of choice.

Revisit the Prototype

Now that the structures are in place to populate the template with actual data, it’s time to create some template code that uses the variables assigned from the controller. The syntax of Smarty’s template code is very straightforward and anyone with knowledge of a C based programming language will pick it up very quickly.

  1. Assign the necessary variables to the templates.
  2. Remove the hard-coded temporary data.
  3. Write some template code to output the information.

Technologies

There are loads of different options when creating web applications, here’s a list of the tools and technologies I use:

Tools

Technologies

  • Server Side Scripting: PHP
  • Template Engine: Smarty
  • Javascript Framework: jQuery (great for Ajax and UI widgets etc.)
  • Client-Server Communications: JSON
  • Plugins: PEAR
  • Database Engine: MySQL

Summary

So, that’s about it. Obviously this is an extremely high level overview, but I’d be very interested in hearing how other people go about creating their web applications. Go on, leave a comment!