Who am I?
Ryan Couser is an enthusiastic freelance web designer from Belfast, Northern Ireland with extensive knowledge of designing and developing standards based multimedia for the web.
Ryan offers high quality web design, print design, graphic design, flash, branding, and content management solutions at affordable prices.
Furthermore he recently graduated from BSc Hons Interactive Multimedia Design with a high average of 68%, giving him a strong foundation on which to build.
Latest Blog Entries
- Week 14 - Shameless Marketing and User Testing
- Week 13 - Search Engine
- Week 12 - Displaying the Front-End
- Week 11 - PHP Galore
- Week 10 - Registration, Login and Lost Password
- Easter Break - PHP Busy, CSS Drive and MOO MiniCards
- Week 7 - Getting started with MySQL and phpMyAdmin
- Week 6 - Viva Presentation and Guerrilla Marketing
- Week 5 - Designing and saving out individual Start Recycling pages
- Week 4 - Re-brand of StartRecycling
- Week 3 - The launch of my very own portfolio site
- Week 2 - Development of my portfolio site
- Week 1 - Major Project and purchasing ryancouser.com
The Blog
The main objective of this blog section is to record the development of my major project, through effective time management, marketing and attention to detail. Coming Soon @ www.startrecycling.org
Week 14 - Shameless Marketing and User Testing
The Start Recycling website has come a long way over the last few weeks and I am extremely pleased with the final outcome, but it is not what I think that is important, so I have been phoning and emailing everyone and anyone in my contacts. Asking them to sign up and try out Start Recycling for themselves and give me feedback. Initial I received a few emails with simple error I had missed while moving the site from my localhost to web hosting but nothing big and they were sorted quickly.
After that I asked Chris to check it out and he informed me of a few more problems. I had limited the filename to 20 characters but his filename was way over the limit and cut it off, as a result I increased the limit. Another problem was that his inputted description contained <pre> tag that I had not defined in the CSS so it was appearing across the screen behind the recently added, therefore I styled the <pre> tag in my CSS and the problem was solved.
I thought it was all done and dusted until I received a phone call from a friend still using Internet Explorer 6, why anyone is still using that I don’t know but he said the drop-down navigation didn’t function properly. This got me worried because God knows how many other people still using IE6. Consequently I couldn’t install IE6 on my Vista laptop which already had IE7 preinstalled. Out came the veteran piece of equipment that I once used in the Stone Age, and after some time playing about with the styles I managed to get it sorted.
One final issue was that the dates and times being displayed were the server time, making all my start time the US time zone. I tried adding the 8 hour difference to the database time but that didn’t work, so reviewed the MySQL documentation to see if there were any functions I had overlooked and came across CONVERT_TZ which converted the SYSTEM or server time to Europe, London.
Also this week I managed to get in contact with the web editor of the Belfast City Council to ask them if it was possible I could have a link from the Waste and Recycling section of their site but as you can see from the reply below there was no luck.
Final Words
I can't believe this will be my final words of IMD, four long years of hard work are coming to an end and I have enjoyed every minute. My learning outcome over the last year alone has been phenomenal and hopeful I can use this be successful in the multimedia field after university. For this moment I will be keeping my eye on the prize of getting my preferred qualification and wish every else all the best. I can't wait to see everyone's finished major project at the degree show. All the best.
Week 13 - Search Engine
A major part of Start Recycling is it search engine facility, so this week I spent many, many hours trying to figure out how I could do this and what options were available. At first I thought of Google custom search or Google API, so I tried both but wasn’t happy with the outcome, the problem was that Google had to index my site before it picked up certain pages and with my site being dynamic and changing all the time, it would have caused troubles searching listed item. After looking about on the internet I came across a nice little search engine script but after reviewing the source I notice it was wrote in MySQL and the way I had learnt was MySQL Improved (MySQLI), which is much more secure. The problem is that you can’t mix the two, so I had to re-write the script in MySQLI. The script works as follows:
- Remove all backspaces and trim white spaces from the inserted data
- Separate all the words entered into separate keywords
- If no word were entered display, “Please enter a search…”
- For each keyword select everything from sr_listing where keywords entered is like listing title and description
- If no matches then display, “Sorry, your search returned zero results.”
- Check if any of the result have the same id if they do then delete them
- Display the results as a link
Week 12 - Displaying the Front-End
Now that all the major applications were in place to register and upload content, I needed to start thinking about displaying this information on the front-end. Subsequently I began by selecting everything from the sr_location table of the database and displaying each location in the navigation along the top and left side of the home page. Each of these locations were then linked to a specific categories page for that location. Next I selected the latest 12 items entered into the database with a status of open, making sure that if the item was no longer available it doesn’t display. These items were then linked to a specific items page with more details.
I will now talk you through and explain the functionality of the categories and item pages.
Start Recycling - Categories
- Check to see whether the location_id is present in the URL query string, if not then set “No location selected” as the header.
- Set the maximum number of records per page to 6 and select everything from the sr_listing table with a status of open
- Loop through each record of the database that has the location_id gathered from the query string
- If there are more than 6 item then insert next and previous links
- Check to see if the listing has an image in the database, otherwise display a sample image
- Display a number count to show how many items are currently being viewed and the total of items
- If no items are listed for the selected location then display a message saying, “No items currently listed for this location. Please check other areas close by or why not list something yourself. Saving the environment from heaps of waste and helping your fellow neighbour who may just need what you are throwing out.”
Start Recycling - Item
- Check to see whether the item_id is present in the URL query string, if not then “No item selected” is set as the header.
- Select everything from the sr_listing table that has the item_id gathered from the query string
- Check to see if the listing has an image in the database, otherwise display a sample image
- Check if the listing has any additional images in the database, and display appropriately, otherwise display nothing.
- Check to see if the user is logged in, if not display login link
- For the ask a question section, check to see if anyone is logged in, if not display a message saying, “You must Login in order to use this function.” If they are logged in display the textarea and submit comment button.
- If someone tries to type the item_id in manual at the end of the query string then a display message saying, “The item you have selected is currently unavailable, why not search, check the recently added down the right or navigate to your local district area.”
Start Recycling - Comments
If a question has been submitted then it is displayed in a speech bubble with the date and username of the person asking the question to the right.
Start Recycling - Confirm Item
When the Freecycle Now button is selected the user is forward to the confirm item page which displays the name of the selected item and in a bright red box asks the user to confirm the item. This is to allow for the possibility that someone might click the Freecycle Now button by accident. Then when the confirm item is click custom emails are generated and sent to the claimer and the person that listed the item as confirmation. Finally the item status is updated to closed and redirected.
Week 11 - PHP Galore
This week I was concentrating on the My Account and List Item sections of the site, I will go through each step of validation for those shortly but first I had the problem that I wanted these sections to only be available to people that were registered and logged in. The solution was to use session variables, therefore I created a separate include file that got the time, set a time limit of 30 minutes, checked that a session variable had been set at login, if not or if time had exceeded 30 minutes without any movement, redirect to login page.
Start Recycling - My Account
The My Account page itself does actual have any programming involved, simply displaying the username of the person logged in. The main objective of My Account is to give people brief instructions how to use Start Recycling and the ability to change their password and email address if required.
Start Recycling - Change Email
- Check if the save button has been selected
- Remove all backspaces and trim white spaces from the inserted data
- Check that all the required fields have been filled in, if not display error messages
- Validate the email to ensure no illegal characters are present, reject if it does
- Check the new emails match
- Get the users details from the database and compare the old email address entered with the stored version of the email address
- If no errors so far update the database with the new email
- Redirect if successful
Start Recycling - Change Password
- Check if the save button has been selected
- Remove all backspaces and trim white spaces from the inserted data
- Check that all the required fields have been filled in, if not display error messages
- Check that the password is at least 6 characters with no spaces
- Check the new password match
- Encrypt the old password enter
- Get the users details from the database and compare the old password encrypted entered with the stored version of the password
- If no errors so far update the database with the new email
- Redirect if successful
Start Recycling - Logout
I forgot to mention that the My Account page also provide the feature to logout, this was achieved by running a script that destroys the session array and redirects to the login page when the logout button is clicked.
Start Recycling - List Item
- Check if the upload button has been selected
- Remove all backspaces and trim white spaces from the inserted data
- Check that all the required fields have been filled in, if not display error messages
- If all the fields have been completed insert into the database
- Redirect to file upload
On the List Item page I added the extra feature of TinyMCE Text Editor instead of a plain text area. By doing this I could add bold, unordered lists, order lists, spell-check and most importantly paste from word which cleans up copied text before being inserted into the database. There were many other additional add-ons such as font family and colour for the editor but I chose to remove them to kind a consistent style through my site with others inputting the content.
Start Recycling - File Upload
- Remove all backspaces and trim white spaces from the inserted data
- Define the maximum upload size as 1MB
- Define the upload folder
- Replace any spaces in the filename with underscores
- Check that file is within the permitted size
- Check that file is of an permitted MIME type
- Check if a file of the same name has already been uploaded
- If it has add a timestamp to the start of the filename
- If upload successful or no files selected connect to database and update image1 - 5
- Redirect to the listed item
Week 10 - Registration, Login and Lost Password
With all the design and learning out of the way, for the next few weeks I will be sitting night and day like a greasy, long haired monkey typing lines and lines of Hardcore PHP. Not just any PHP, Hardcore PHP.
This week I managed to get the Login, Register and Lost Password pages working, but I can’t copy and paste the code in here or take screenshots otherwise people would know how the validation was structured. This would make the site unsecured and wide open for hackers, subsequently I can’t leave the last few weeks of my log blank. What I have decided to do is talk you through each step of the validation and explain it as clear as possible without revealing any key security factors.
Start Recycling - Register
- Check if the register button has been selected
- Remove all backspaces and trim white spaces from the inserted data
- Check that all the required fields have been filled in, if not display error messages
- Validate the email to ensure no illegal characters are present, reject if it does
- Check that the username entered is between 6 and 15 characters
- Check the username consist of alphanumeric characters with no spaces
- Check that the password is at least 6 characters with no spaces
- Check that both passwords match
- If no errors so far check that the username and email address don’t already exist. Otherwise, it's OK
- Encrypt the password
- Insert the details into the database
- Redirect if successful
Start Recycling - Login
- Check if the login button has been selected
- Remove all backspaces and trim white spaces from the inserted data e.g. if someone leaves a blank space after there username
- get the username's details from the database
- encrypt the password entered in the form and compare it with the stored version of the password
- if they match, set a secure session and redirect to my account
- if no match, destroy the session and prepare error message
Start Recycling - Lost Password
- Check if the reset my password button has been selected
- Remove all backspaces and trim white spaces from the inserted data
- Check that all the required fields have been filled in, if not display error messages
- Validate the email to ensure no illegal characters are present, reject if it does
- Check that the username entered is between 6 and 15 characters
- Check the username consist of alphanumeric characters with no spaces
- Check that the password is at least 6 characters with no spaces
- If no errors so far, check that inputted username and email matches that on file
- Create random password
- Encrypt the password
- Update the database
- Create and Send an email to the email address on file with the new random password
- Redirect if successful
Easter Break - PHP Busy, CSS Drive and MOO MiniCards
Well it’s the Easter and most people are heading of on holiday break but not me, no rest for the wicked, I’ve got three big PHP books to read through. Last semester I purchased the PHP Solutions: Dynamic Web Design Made Easy by David Powers from amazon.co.uk and worked through it chapter by chapter every week but now that it is time to actually implement my learning into an application for my major project I have hit a brick wall and don’t know where to start.
I’m going to go back and have a read over it again, now that I’ve got a break from all those COM assignments (They really do take the piss, for example spending two days writing XML, DTD and XSLT for buttons of marks) and plus I don’t have anything major planned. I’ve also just purchased two other PHP books of amazon.co.uk, PHP and MySQL Web Development, Third Edition by Luke Welling, Laura Thomson and Essential PHP Security by O’Reilly. Amazon’s making a fortune from me these days, but I would like to thank them for getting me into my reading, was never a big reader back in the day.
Anyway for the next two week I will be locked up in my prison cell of a room with these three books working through the tutorials and creating a folder of PHP and MySQL snippets that might be useful for my major project. One thing I have noticed is that the same snippets of code crop-up over and over again and they just need reworked for different purposes. Consequently creating a folder as such will be extremely useful for my major project and in the future when I think, oh how did I do that again?
CSS Drive
I was just checking my Google Analytics the other day and notice that I had a raise of 200 people visiting my portfolio site from all over the world, places from Germany to Nigeria. I was bewildered to how this was possible when the site had only been up for a few weeks, and three of these weeks the site had been down due to a huge failure on Dreamhost’s behalf. At that moment I checked referring links and realised that my navigation design was in the top 10 of CSS Drive Menu Designs, it even impressed me. At this point in time it has been vote 8.2 / 10 from 24 votes and even has a comment from some Russian called Sergey. I’m afraid I can’t speak Russian Sergey but if someone could translate and would be more than happy to reply.
MOO MiniCards
Finally got some of my MOO MiniCards out and about, handing them to anyone with interest. I’ve got into the habit of carrying some in my wallet every time I go out because anytime is business time. The amount of people I have spoken to in bars around the town that ask for your card is unbelievable and even if they don’t follow up straight away it still an opportunity to get your name out there. If anyone finds the specially marked cards I left in a Portrush B&B I’ll give you an extra 20% of my services. How’s that for a deal?
Week 7 - Getting started with MySQL and phpMyAdmin
Time to get down to the kitty gritty and start working on the database for Start Recycling, I have a basic database structure already worked out on paper so it was just a case of downloading the MySQL Essential pack from the Interweb and installing.
One problem though, I am running Microsoft Vista which has serious problems regarding permissions. With help from a geeky friend I figured that the php.ini set-up file was the problem, by configurating the session start path and various other settings to a directory outside of the root, the problem was solved.
Now that I had PHP and MySQL running I needed a very intuitive user interface called phpMyAdmin to control the MySQL. Although you can do everything using MySQL monitor, phpMyAdmin is much easier to use and is excellent for a web designer such as myself, not coming from a programming background. Plus it’s free and very straightforward to install.
Creating a new database with phpMyAdmin was easy, begin by tying the name of the database into the field labelled Create new database and leave drop-down menu at Collation, and click Create. The next screen should confirm that the database has been created and offer you the opportunity to create your first table. Start Recycling consists of 4 tables:
- sr_comments
- sr_listing
- sr_location
- sr_users
I am not going to reveal the structure of my tables for security reasons because then anyone reading this blog would have an advantage for attacking my site once launched. Subsequently the most important points I am going to make about MySQL are choosing the right data type and creating privileges with different access abilities.
With regards to choosing the right data type, at first it might seem confusing with the amount of different types by once you get into the swing of things it becomes less daunting, for example int, varchar, text and timestamp are the only types I used throughout the whole Start Recycling site.
Finally make sure to use at the least two privilege accounts, one with SELECT, INSERT, UPDATE, DELETE and one with just SELECT. The reason for doing this is security, you don’t want to provide any Tom, Dick or Harry control over your site so in unsecured area use the account with limited access.
Week 6 - Viva Presentation and Guerrilla Marketing
Viva time has arrived and the thought of speaking in front of approx one hundred people seems quite daunting. This is not something I had experienced before but with my confidence in one to one communication I’m not worry too much. Preparation is always the solution and that is exactly how I began, deciding that I didn’t want blocks of text onscreen while I spoke otherwise people would concentrate on that rather listen to what I had to say, short points are sufficient.
The structure of my presentation will be as follows:
- Brief Introduction
- What is Start Recycling?
- What is the need for Start Recycling?
- Did you know fact?
- How will Start Recycling look?
- What makes Start Recycling different?
- Technologies Used
Now it's time to write the speech out and practice timing to insure a faultlessness presentation that remains within the time restraints. The saying is true, practice does make perfect.
All that's need now is some que cards but my printer is playing up and doesn't like the idea of printing on card, I'll have to get my trusty stray mount out and improvise.
Viva Speech | .pdf format
Viva Presentation | .pps format
The feedback from my Viva Presentation was tremendously uplifting. Everyone including Chris seemed comparatively impressed with my new branding and the screenshots of the Start Recycling layout.
Guerrilla Marketing
Also this week I attended a seminar about Guerrilla Marketing at Ortus business. The two hour slot was taken by Gerry Faloona @ www.gerryfaloona.com. Gerry’s talk was very informative with countless key points to note but most importantly he provided me with motivation and drive to advance my networking skills.
He encouraged everyone at the event to stand up, walk around the room and greet someone you have never spoken to before with a brief summary of yourself and exchange business cards. A very effective process that I will take onboard for the future, I even managed to meet Benat through this, which I ended up working with.
I don’t have permission to publish the material from the day but the main tips I picked up, fall under the following 15 words.
- Commitment
- Investment
- Consistent
- Confident
- Patient
- Assortment
- Convenient
- Subsequent
- Amazement
- Measurement
- Involvement
- Dependent
- Armament
- Consent
- Augment
The best advice I received from Gerry was that the real profit come after you’ve made the sale, in the form of repeat and referral business. Non-guerrillas think marketing ends when they’ve made the sale.
Week 5 - Designing and saving out individual Start Recycling pages
The branding of Start Recycling is complete and feedback has been positive, now it's time to come up with an attractive design that is easy to navigate and readable by all ages, big text with clearly labelled areas such as recently added and huge search facility at the top of the entire site. Below is a list of the finished pages:
Start Recycling - Home
Start Recycling - Categories
Start Recycling - Item
Start Recycling - Login
Start Recycling - Register
Start Recycling - About Us
You may not notice from the screenshots but the login and register are within the same page, AJAX is being used to smoothly transition between the two by the user selecting the required tab, either new user or returning user. I’m starting to really like the dynamic functionality that AJAX is bring to the web.
Week 4 - Re-brand of StartRecycling
In the first week I mentioned that I wasn’t particularly happy with the branding of Start Recycling. Chris thought it was too similar to the Cream Night Club logo and from the images below you can see were he was coming from. The idea behind this initial logo was to take the three arrows from the well known recycling logo and form a rounded shape resembling the world, but obviously this wasn’t portrayed as well as I had intended. Time to get back to the drawing board.
To begin with I decided to scrap the present tagline “choose to reuse” because I felt that not only was it a bit to serious but also it didn’t describe the project in a way that would interest potential users. “Choose to reuse” could be associated as just another dump site or recycling centre, putting people off before they even visit the site. The new tagline I have come up with is “Ebay meets Recycling.” I think it’s ideal because it explains at first glace what the project is, and with people being so familiar with the term Ebay, it can only create awareness.
The idea behind the new brand was to have a price tag made of recycled paper with a recycle icon replacing the price, symbolising that the items have no price and are free due others recycling. Click the image below for a larger view of the brand.
This week I also submitted my portfolio site to many of the different search engines and directories before installing Google Analytics to monitor the progress and statistics of people viewing my site. Allowing me to see where visitors are clicking and what areas are getting the most attention and impact.
Week 3 - The launch of my very own portfolio site
My own portfolio site is something I have been looking into for some time now, and today I can finally launch it. It has taken a lot more out my major project time than first expected but I wanted to perfect every last detail, knowing how important it will be in the future life after university.
The branding of your own name is a great deal hard than someone else because you have been looking at it all your life and no matter how many different fonts and style used it still comes across as bland. Consequently I didn’t want to follow the usual designer route, creating an icon with the combination on my initials. As a result I decided to choose the safer option of using a handwriting font with added drop shadow. The finished product looks excellent.
For the navigation I tried to living up the simple text links with large coloured rollovers and related icons to help people visualise the page content. Icons attract individuals attention more so that text, causing them to interact more.
The longest and most mundane part was populating the actual page with content, especially my portfolio which had plenty of work dating back to October 06. Now my portfolio is out of the way I can concentrate solely on my major project.
(Note: This site has been developed web standards compliant to support accessibility laws and is best viewed with latest browsers Internet Explorer 7, Firefox 2 or Safari. If you don’t have them, I strongly recommend you download either now, you don’t know what you're missing.)
Week 2 - Development of my portfolio site
Working away on my portfolio site at this moment in time and hope to have it up and running at the latest next week. I am having problems remembering dates of my portfolio work so a trip down to my placement looks on the cards. The basic layout is created but you will have to be patient and wait for the launch.
Some of the features that I will be including in my portfolio are:
Slayer Office Image Cross Fader Redux – This technique uses unobtrusive DOM scripting and semantic mark-up to create a nice fading image show alternative to Flash. By simply change the setTimeout value to can determine the speed of the transition. The advantage of using this instead of Flash is that alt and title tags can be applied to images allowing validation and search engines recognition, whereas Flash doesn’t validation unless hacked.
Slimbox - is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.
Google Adsense – is an ad program run by Google that you can include on your website. These ads are generated by Google with relation to your site content and every time they are clicked it makes you money.
The metadata of a website can sometimes be considered as important as the content with regards to search engine optimisation (SEO). Therefore I spent some time analysing possible title, description and keywords for my site, before running it through the Meta Tag Analyser to refine the end result.
The results were as follows:
Title: Ryan Couser | Freelance Web Design and Development in Northern Ireland | Home
- Title Meta tag contains no errors - this tag contains 77 characters.
- Title relevancy to page content is excellent - the Title relevancy to page content is 100%.
Description: Ryan Couser is an enthusiastic Freelance Web Designer and Developer with a degree in BSc Hons Interactive Multimedia Design. Ryan offers high quality web design, print design, Flash, branding, and content management solutions at affordable prices.
- Description Meta tag contains no errors - this tag contains 247 characters.
- Description relevancy to page content is very good - the Description relevancy to page content is 97%.
Keywords: ryan couser, web design, print design, flash, graphics, branding, content management, cms, website designer, northern ireland, freelance, multimedia design
- Keywords Meta tag contains no errors - this tag contains 12 keywords and 155 characters.
- Keyword relevancy to page content is fair. However, this is not necessarily bad if you have a lot of content. The most important factor is to have your keywords on the page a few times - the keywords relevancy to page content is 83%.
My web page load time is 1 seconds.
Week 1 - Major Project and purchasing ryancouser.com
Well it’s back to university after a nice long break for Christmas, with the major project proposal out of the way and marks of 64, I’m ready for that last push towards finishing my degree among many sleepless night. The bulk of the next fourteen weeks will be spent designing, developing and marketing my major project located at StartRecycling.org.
The idea is to have a dynamic website using PHP powered by a MySQL database which is fairly similar to the eBay’s concept, only instead of buying the items, they are totally free. Saving the environment from heaps of waste and helping your fellow neighbour who may just need what you are throwing out.
I’m not too convinced with the current branding of StartRecycling, and will be looking at some alternatives in due time, but for this moment in time I have just registered ryancouser.com and hosting with Dreamhost.