Archive for Katie Butler

Further Ideas for development

The skills that I have developed and practiced throughout this module have been beneficial to me in that I now have them to use in future projects, and I genuinely feel confident with them. 

Firstly my initial idea for personal development will be to continue with trying to resolve the problem surrounding the use of PHP in my project. 

Secondly, for the purpose of this assignment it was not necessary to build all pages to the website; however these are what I will now look to build and develop, so that the menu links such as ‘About me,’ actually have some content to link to and display.  

In terms of developing my CSS skills further, this could include making print-friendly versions of my web pages to go with my portfolio site as a brief example, but overall I think the more practice I have with CSS the better my chances are of becoming quicker at designing on the whole. As for PHP there is a large amount to develop with, and my original project idea of a Facebook application will be another main focus of mine. PHP is where the future of web design is, and as a growing web designer this is the direction I too need to be taking.                  

New Employable Skills

CSS is seen as a fundamental part of web design; however is an area that I personally admit to have been quite lazy with since learning the field. This is the main reason why I now wanted to develop my knowledge within the area, because at such an important point in my academic studies I knew that it was vital to know how to deploy these key skills confidently into practice, given that my third year project is to build a website and that will take such elements into account. What’s more, they are basic knowledge and skills that are almost certainly required when seeking employment within this sector, Employers will not only be looking for someone who can create unique designs, but will also depend on that person to have such skills that will make the work they produce more accessible, as this is an important issue for web companies. CSS skills also engage the designer more so with usability, for instance the placement of content is thought out more logically with CSS, and hence makes the designer more aware of how content appears and impacts on a user’s general site experience. The main reason people want websites is to attract the attention of users, and a user’s attention is only held with good design – something which CSS clearly promotes. 

Not only have I tried to improve my CSS knowledge and skills, but I have also used some PHP coding in my project. PHP itself is a technology which I have only recently been introduced to, and was the basis for my original project proposal which unfortunately became overrun with problems, and these were deemed too challenging for the short space of time with which this project had to be completed within. The use of PHP in my project is to pass PHP variables with a URL. This means that with my CSS designs, a user would be able to change the style/design of the webpage dynamically, i.e. change/load the new style into the webpage itself by clicking on a link.

In order to learn and develop this technique I first worked with a tutorial, and later also sought advice from the module lecturer. Unfortunately however, I have not yet been able to get this feature to work 100% correctly, and have been trying several methods, that I have been testing on my own personal webspace ( over the past week to resolve the apparent problem – so far with little success. Despite this my understanding of the technique has developed from virtually nothing to an adequate level, therefore with more practice and guidance I may eventually be able to get this element to work how it should. In doing so, I will have gained further skills to present to and hopefully impress potential employers or even clients with, especially those who may want to utilise my web services in the future.

CSS and issues of Accessibility

CSS essentially encourages web designers to create more accessible web pages and hence more accessible websites overall – due to the nature of their functioning. CSS as I have outlined in some of my previous blog research, gives designers more control over their HTML pages, for instance they become more flexible, and elements of design can be changed relatively easily to suit a user’s requirements.    Having done some Internet research into accessibility beforehand, I can now identify how my web pages and CSS designs have been made accessible. 

  1. Each page conforms to general usability guidelines, i.e. such as making links distinctive through colour, underlining etc
  2. Each page is cross-browser compatible, and so looks almost identical in IE and Mozilla Firefox etc (
  3. Each page has been optimised to a certain extent (meta tags) so that search engines would be able to prioritise the site more easily.
  4. CSS has allowed me to control content via ‘DIVS’ which effectively separate content, yet still present it in user-friendly ways.
  5. The use of CSS also means that an alternative font will be displayed with regards to all text, if the current one is not installed on a user’s computer.

 In my designs I have also used a wide colour range, and it is always useful to check these colours with to guarantee that people who are visually impaired (i.e colour blind) can still see some form of colour at least, ensuring then that they are not missing out on any important information as a result of this, for example the page’s links. This is a quick task that I have used before in previous projects and is another valid way to enhance accessibility. (See Appendix 1 for results of this testing)

Proposal – Revised

To start thinking about a new project I thought about the near future, and what skills I could develop to help with the work I would be doing in the coming months – Most importantly, my third year project which will be taking shape over the next semester. I also re-visited the assignment brief to check what would be an acceptable project.

My new project therefore will be to develop and advance my CSS skills as this is an essential, and to some, quite a basic part of good web design, yet still remains an area that I personally feel I could improve on. 

New Project Outline

To briefly outline my project, I am creating 2/3 separate HTML pages which will all display the same content (this will be content about myself, in a portfolio/CV style) yet will all look different as a result of CSS. Furthermore I shall use a short piece of PHP Code with these pages that will allow a user to click on a link to display the content in the alternative styles without having to load up a separate window.

This is similar to but instead will be used to present not only my personal CSS skills, but also myself as a web-designer on the whole. Through using CSS to design different ways to present my website I can consequently represent my own personality and individuality in a number of ways.  

Target Users

Although for such a project I won’t have a specific target user, I would hope that by presenting myself and my work in such a way that I would especially attract the attention of employers and potential clients.

Benefits of CSS Presentation

To help with my project I brought the Mike McGrath ‘CSS in easy steps’ book, which has become a handy and useful reference that covers all areas of CSS. For instance in the book the advantages of CSS are initially pointed out, and I have decided to include them within this brief proposal to further support my project’s viability.

‘Advantages of CSS Presentation:

  • Greater styling possibilities than HTML – allowing you to specify text colour, create surrounding borders etc.
  • Easier to use than HTML – allowing you to set or modify the appearance of elements with just one rule.
  • Wider flexibility than HTML – allowing you to create a set of rules in a single centralized style sheet that can be deployed across multiple web pages to provide a consistent website feel.
  • Smarter than HTML – allowing you to easily provide special styles that intelligently override general style presentation.
  • More control than HTML – allowing you to control the appearance of certain parts of the interface, such as the cursor.
  • Better practicality than HTML – allowing you to produce web pages of smaller file sizes, which download faster.
  • Ready for the future – XML may replace HTML as the language of the web, and CSS can readily style XML elements.’  (McGrath, 2005)

My Reasons for a revised project…

After spending several weeks outlining plans for a unique assignment 2 project, the actual start of production became problematic. To develop a Facebook application with PHP, it was required that my computer had PHP installed along side a running server (Apache) – The process of setting these up is where the problems began!

My personal laptop runs with Windows Vista, which as a relatively new system (as I have now found out) is difficult to work with, in the sense that there is little information to assist with the installation process of Apache and PHP compared with older versions of Windows, such as Windows XP. So when it became apparent to me that Apache was not running properly on my system, and which consequently halted my installation of PHP, it became difficult to locate a resolution for this problem.

As the weeks were passing by, and many attempts were made to have everything up and running correctly (even for example trying the idea of using an emulator for an older version of windows) I realised for this project, I was simply not going to have enough time now to make a sufficient attempt at developing such a project. However I still feel the project has a lot of potential, and is one that I shall look to take on in the future when time is not so short, and when there is perhaps more in formation about Windows Vista and PHP together, available.

When reflecting on all of the pre-production work in which I carried out for this project, it would seem silly not to proceed with the idea at a later and more appropriate time; as much of this outlines great benefits from developing such work.

So at the start of December I was faced with the problem of creating a new project for myself, and one that I could complete within the short time I had remaining…approximately 6 weeks.

I have briefly outlined this new project in the blog entitled ‘Proposal – Revised.’ 

Standing On The Shoulders of Giants Vs Plagiarism…

“If I have seen further it is by standing on the shoulders of giants’ – Isaac Newton, 1676 

– Referring to how we can develop and build our knowledge and skills through taking inspiration and learning from others –

In last week’s lecture we talked about plagiarism and how it affects web and new media production.

In the workshop we were asked to find something of use to our project or something we could use to further the project and/or our skills…this could include: ‘A script (PHP), a source code (Flash), or a website made in a certain way’ for example.

Something that I have already identified as useful to my project is the Facebook application, ‘MySpace Link.’

In my proposal I outlined a similar project that took inspiration from this particular application, but served a different purpose and was developed more. (One example of this is how I proposed to possibly introduce ‘skins’ to my application)

In doing this I hope that my work can be seen as ‘standing on the shoulders of giants,’ in this case Patrick Shyu – an established web developer – rather than as plagiarism, otherwise I could have just copied the ‘MySpace link’ idea and perhaps just changed the name for instance. What’s more I will have to learn and exercise all of the coding myself because this is not accessible through Facebook.  

However when looking on Facebook there are lots of replica applications, so I still feel the boundry between plagiarism and ‘standing on the shoulders of giants’ is hard to distinguish in web and new media production.

Project Management Exercises

Link: My Gantt Chart

In order to manage my project efficiently, I have carried out a number of exercises specifically designed for project management. Firstly, I have created a Gantt chart online for my project via the following website: 

I have attached my personal project Gantt chart as a word document onto this posting (See link at top). The chart clearly outlines the tasks needed to be carried out, and to what time scale I should ideally accomplished these within.

The second exercise I have carried out on my project is a SWOT analysis (Strengths, Weaknesses, Opportunities, Threats) based on both internal (my personal abilities) and external (other/outside) factors that both favour and threaten the successfull completion of my project.


Internal –

  • I have knowledge on the wider context of my idea (I.e. How Facebook works, what is needed to develop an application for Facebook etc)
  • I have knowledge on creating successful designs and layouts (through previous  and current design based modules)
  • I have knowledge on the technology and skills involved (through previous and current production modules)

External –

  • Facebook is an extremely popular (and growing) site to develop for.
  • There is a necessity for such an application (previously conducted market research provides evidence of this)


Internal –

  • Difficult new skills are required to be learnt, understood and developed efficiently
  • Executing such skills may be challenging on a personal level

External –

  • Competition amongst other Facebook developers and applications is high.
  • My proposed application initially targets a niche user group, and would need to be made more flexible in order to become more popular.


Internal –

  • The application could become impressive portfolio material.
  • The application would be evidence of my design and technical abilities.
  • The application could be the main influence behind me obtaining a job within a web and new media company in the coming months.
  • The application could attract attention towards me as a developer, and furthermore, provide me with work.

External –

  • The application can reach a global market, promoting me and my work on a global scale.
  • The application helps other web designers in securing more work.


Internal –

  • Not understanding the technology fully, resulting in technical difficulties and/or unsuccessfull completion of the application.
  • Not managing my time well, threatening the quality and even completion of the project altogether.

External –

  • Another developer creating a similar application before me.
  • Software Problems (I.E. PHP etc)

The final exercise I have conducted as part of my project management is a PEST analysis. PEST analyses Political, Economical, Social and Technological factors that surround a project, and below I have applied them to my own.

Political – Plagiarism & Copyright; These are two issues concerning my project which need to be taken into account. Both relatively similar, outline how the application I am creating must be that of my own work, ranging from the idea itself to the scripting behind the application.

Economical – This element I am abit unsure on, however how I see it as applying to my project is through the money that could be made from deploying such work. 

Social – Undoubtedly the project has relevance towards the importance that social networking sites such as Facebook have with people in today’s society. What’s more, it could potentially provide me with more career opportunites if completed successfully.

Technology –  PHP is regarded as the future for all things web and new media, so hopefully my project therefore can be deemed both contemporary and advanced, and will fit in adequately with similar content already avilable online to date.

Developed Proposal

Project Outline

The main aim for my assignment 2 project is to design and create a fully working application for Facebook. However realistically speaking, this will prove to be a difficult challenge for me and my personal technical abilities, especially as I will be embracing the field of PHP and technologies that I have previously never used or worked with before. What’s more, professional developers themselves do not always produce flawless applications to begin with, so with this in mind I can probably expect that my own application will take a great deal of work and progress to become effectively useable. 

Ideally I hope to be able to meet the demands of this project outline, because in doing so I can expect many personal benefits. Nevertheless at the very least I will certainly produce a finished prototype for my proposed Facebook application.

Target Users

My taget users will initially be users of Facebook whose profession or hobby is as a web designer – a profession/interest which I can connect with. Nonetheless if this application does become developed successfully, then there is no reason to say why a similar application for photographers or designers for instance might not be developed as well, and which can be used in the same way.

Market Research: Analysis of similar/exisiting Facebook applications

In order to gain some insight into the types of characterisitcs that make an application successful on Facebook, I have done some initial research into similar existing applications to that of my proposed idea.

‘MySpace Link’ – The MySpace link is a popular application that allows users to put screen grabs of their MySpace page onto their Facebook profile. This application is what inspired my idea for a portfolio application specifically for web designers, and therefore the objectives for both applications are the same: 1) To Promote something 2) To Attract attention towards something that reveals more about that user, or represents that user.

‘Blog Link’ – Designed by the same developer, the Blog Link appears to be a relatively new application that is an extension or adaptation of the original MySpace Link. Instead of putting a screen grab of your MySpace page onto your Facebook profile, with this application you can but a screen grab link to your blog. As a new application the percentage of users is relatively low, however with the popularity of Facebook and blogging combined, I can almost certainly see this application growing in popularity, especially with professionals such as journalists etc.

‘Top Friends’ – The reason why I have considered the Top Friends application is because it uses ‘skins,’ something which I may incorporate into my own application. The use of ‘skins’ with the Top Friends application is extremely popular and makes the application highly distinguishable on a user’s page – This is a quality I would like my own application to have.

‘Top Sites’ – Finally the Top Sites application is one that I came across when looking at the Top Friends application, and allows a user to put screen grabs of their favourite websites onto their profile. The application however doesn’t appear to be very popular which could be due to a number of reasons – I.e. It could be quite new, users might experience technical problems with it, however the reason why I feel it is not so popular is because it is quite broad. By this I mean that it may become more appealing if it was more focused, for example instead of just being ‘Top Sites’, it could be ‘Top Clothing Sites’ or ‘Top Music Sites’ etc.

Market Research: Would a web designer use my application?

Instead of just follwing my own judgement on whether my proposed idea would work well or not, I decided to contact an established industry professional through Facebook to see what their thoughts on my idea are, and whether or not they would potentially consider using the application on their own profiles.

My contact was Steve Firth, and below is a short extract from what I asked:

‘Im looking to develop an application for Facebook, and was proposing an idea which would allow web designers to put screen grabs of their work onto their profiles to promote themselves.
I was wondering what your thoughs on this idea are as a web designer (good or bad!) and would you consider using the application on your own Facebook account? if yes, why? if no then why not?’

Below is the response I got back from Steve: 

‘Yes i’d certainly use the app myself (would be nice to install a useful one for a change). Any extra links and exposure is always good, web worlds pretty saturated [mostly by bodgers] and anything that helps one rise above the bg noise is always welcome.As regards making it ‘commercially viable’ i’d consider keeping it quite open, don’t pitch it too tightly to a niche as if you miss it it’s pretty much end of story … if you kept it so that, for example other creatives could use it as a portfolio or even gen public you’ll probably get a wider uptake.If you’re being marked on just the app itself, that it works, forfills spec etc then keep the focus tight – that way you control the varibles that you’ll be marked on, take up being secondary.If you’re being marked on the ‘sucess’ of the app then flexibility is key, people will find use a general app for their purposes. Some gen thoughts:

You can go mad on javascript, facebooks dependant on it anyway (also with slow general loading times ppl wont notice the overhead)

Whilst your designing an app for webdevs, its the public that will ‘use it’ and public like shiney/popup things (am thinking ask’s use of url preview etc)

Any support for stylesheet switching so they can skin own portfolio? (cross url content is common on FB so isnt a security block on this)

Hope this is of help, feel free to msg/add me should you want to bounce any ideas off me or just fancy a webby chat.

gl with your app, it’s nice to see a some women coming into webdesign to balance off a pretty much XY world.

I feel that Steve has made several key points in his response that I can and should take into account, making this particular research quite valuable towards my assignment. For instance when he talks about targeting a niche or mass audience depending on the assignment criteria – I found this particularly important to consider. I also liked the fact that he too suggested the idea of using ‘skins,’ something that I have proposed but did not actually put foward to Steve in my original message.

A link to Steve’s company:

Other comments welcome

The Facebook Conquest?

Below I have collaborated links to some of the most interesting articles which show just how popular Facebook is, and how the site is becomming more than just a social networking site…

Article 1 – ‘Is Facebook the next frontier for online news?’

Article 2 – ‘UK Facebook users soar to 3.5m’

Article 3 – ‘Microsoft strikes ad deal with Facebook’

Article 4 – ‘Social networking a boost to PR’,,2195423,00.html

Article 5 – ‘Amnesty harnesses Facebook generation’,,2187073,00.html

Draft Proposal

Aim :As you may be aware by now, I plan to design and hopefully develop an application for Facebook.

Justification: There are several reasons as to why I would like to develop an application for Facebook, these are:

  1. To enhance my both my knowledge and technical skills by learning how to develop with PHP. Having these kind of technical capabilities will prove particularly valuable to me as they are currently of great demand within the field of web and new media, and are the means in which the industry is heading.
  2. Secondly, the popularity of Facebook is at an all time high and there is numerous evidence to suggest that Facebook is soon to become more than just a social networking site. I have created an additional blog entitled ‘The Facebook Conquest’ which in effect, provides evidence (reports) which support this assumption. As a web specialist, I feel it would be particularly worthwhile to be a contributor towards this phenomena, especially with its evident benefits, I.e. this would look impresive for my CV. 
  3. Finally, concentrating on Facebook will also aid my theoretical work during this year as this too is based around Facebook and furthermore, its users experience.

Proposed Idea 

My proposed idea for assignment 2 is to create an application specifically aimed at web designers, however is one that could later be developed into an application for other media industry professionals aswell (In the same way that many other Facebook appliations have been developed and changed in different ways, I.e Poke to SuperPoke)  

For many users Facebook not only provides a place to socialise but also is a perfect place to advertise themselves, so much so that some companies are even beginning to create accounts now – For example nightclubs are using it as a source for their PR material.

Users can already include information such as work details, skills and qualifications on their profile, and therefore to coincide with this I felt that a visual, portfolio-type application would be a particularly useful tool for a web designer. 

 Instead of just providing text links to their portfolio of websites, the user would be able to add screen grabs of their websites which will give other users (some who could potentially be looking to utilise their skills) a preview of their work and which will also still act as links to the sites.

I personally feel that visual links are more enticing, and that a user is more likely to visit the websites than if they were just standard text based links.

To make the application more exciting, I might also consider creating some ‘skins.’ These wont necessarily have to be bold, patterned designs (because this may draw attention away from the screen grab images) however some basic colours for instance might attract more attention towards the application, especially in terms of where it is on the profile page.

Possible application names could be: ‘My Web Portfolio,’ ‘My Web Designs,’ or ‘Website Projects’ 

« Previous entries