February 5th 2007
/images/feed.png "Comments RSS Feed")
Educational, Programming, Tutorials
I’m going to start producing a few classes for those people who wish to start learning the wonderful programming language of PHP. These will be pretty simple classes and will reach until the end of my knowledge of the language. First, a bit of my experience - albeit a relatively short one.
My History
I first started to learn PHP 3 years ago and have since then done some things I’m quite proud of in the language. I’ve built a system for a hospital in Reading, my own blogging software (although quite simple, it does the job) and also a file directory viewer with AJAX technology. But, my PHP knowledge is quite limited and I have not used the language now for some times as I have been concentrating on the design aspect of the web.
Lesson 1: Hello World!
Every programmer starts off with the ‘Hello World!’ program. Here we are going to get PHP to output the text ‘Hello World!’ to the screen. From this point out I’ll assume you’ve installed PHP and have it running on Apache or the like.
So, as with any PHP script we have to tell the server it’s going to be dealing with PHP. So we start it off with the opening and closing tags. All code goes between these tags:
<?php
?>
Now, as I said all PHP code goes in between these tags. So, now we have to make it do what we want it to do. So, in between those tags we know insert this line of code which tells it to output the text to the screen:
echo "Hello World!";
Once we’ve put this all together we should be able to achieve the result we wanted. Try it yourself on your own server! Just save the following code as a .php file and run it!
<?php
echo "Hello World!";
?>
It’s going to get a bit more complicated than this, I can assure you. I’ll post a lesson every weekday - every Friday we’ll do a roundup of everything we’ve learnt!
January 6th 2007
Blogging, Programming
In celebration of my acceptance into the 9rules community I decided, once again, to create another Wordpress theme for my blog - this time with a much more professional look and with a little more beauty under the hood. It has taken me just over 3 days to plan, mock, test and implement the new design and I know that it’s a good one because I like it and for some reason, I just have to look at it every now and again. While developing it I wondered how other people planned, mocked and tested their designs and whether or not I was doing things correctly. I wondered how the design process worked for professional designers and whether or not I was detailed enough in the three stages. Here I’m going to document the design and its progress from a few days ago when I started it.
Planning
Usually when I’m planning a design I would start with a piece of paper, a pencil and a rubber. But, I’ve found that when designing a Wordpress theme, I prefer to start in my favourite image editor, Fireworks. I find being able to visualise the layout and make changes at my whim, and on-the-go, makes the process much faster and, apparently much more fun. I start with a blank canvas 1024 pixels wide by 2000 pixels high and I set to work. In the past I’ve used a colour scheme generator to give me a palette of colours that I can work with but this time I just went in with a choice of all the colours you could wish for.
I chose 3 colours I would make the design around - light black (#333), white (#fff) and my iconic ‘Wii’ blue (#0cf). I then set to work with the ideas in my head. I always seem to prefer to create fixed width layouts possibly because it is a reflection on my personality. I like things to be structured and things to be the same from all angles; by this I mean I like it to look similar on all platforms, in all browsers and all resolutions. I’ve only ever done a few fluid layouts because of browser CSS support back when IE6 was the latest version of IE but now that IE7 has been released I hope to design a few more, even if just for fun. I’m digressing here, back to colours. As I said I gave myself a limited palette to work with and the idea of a fixed width design and the inspiration from the world wide web.
I set the background colour of the canvas to my light black and then layed down my content area, defined by a white box. My main points of detail for this design were to reduce the header size, place the search function in the header, advertise my acceptance into 9rules and to sort out display issues with my bookmarks in IE6. As I designed it from the top down I was asking myself is the possible? and if it was I was asking how would I do this? The design for the homepage was complete but I wanted to add another stage to planning as I’d faced problems in the past when I hadn’t done it. I previously hadn’t designed the comments and respond section for any Wordpress themes and I always hadn’t been happy with the final result because I’d been unprepared.
I’d finished both plans (homepage and single page) now in my image editor, it was late at night and I realised I’d spent a good five or six hours doing both plans in Fireworks. I wondered whether I was sad or just committed. Next stage is creating a HTML template of the design.
Mocking Up
The next stage in my development process was to turn my graphical plans into poetry, or in my case code. I decided to deviate from my usual header, content, footer div code layout but not too far. I start off with a XHTML Transitional template - because I like to use the strike through tag - and work from there. I have two Notepad2 windows open: one for the template and one for the cascading style sheet and deviate between the two. I tend to write the template code to the next milestone then turn to the CSS, write that and then view it in my native browser. If anything needs changing I do so. Once I’ve reached a major milestone such as I’ve finished the header I will get out my pack of browsers: Opera, Internet Explorer 7, Internet Explorer 6 and of course Firefox. When it’s not being spammed I’ll also require the services of Dan Vine’s service iCapture which will allow me to view it in Safari on a Mac - a very handy tool for me, a Windows user.
It usually takes me around two days (accounting for procrastination) to finalise the design in HTML, find any rendering errors and sort them out but this time it took less than a day. I actively used the W3C validation tools and although I don’t actually understand the thinking behind some of it, I use section 508 and WCAG validation tools. Thanks the kindness of a few friends I received some suggestions and opinions on the design. I like to ask a select group of their opinions as they know their stuff and I respect their opinions. I tweaked a couple visual options and then the day was over again. Time to start turning the template into a theme.
Theme Building
Turning the template into a Wordpress theme is the easy part in my opinion. I don’t like to overcomplicate things and so I only use the minimum of files required to make the theme work. I like the process of cutting up the code and placing the parts into their respective files. As I do so, I keep checking to see how the template integrates with the content over the template-to-theme period.
Because I hadn’t transformed my plan for the comments into HTML for my template, I had to create this from scratch now. I love turning an image into code and seeing it displayed on the screen - code is poetry, as Wordpress says. When I was doing this I came across a bookmark I had made sometime back that linked to a set of over 1000 free icons made by Mark James, called ‘Silk‘. I decided to try and implement them into my design some how and thought that to fill some space, the comments section would be perfect. I think they work well and go with the overall ‘feel’ of the design. The transformation from template to Wordpress theme took a day and I have to say I’m proud.
Final Theme Thoughts
This is my sixth design in the Sunny Man’s/Boy’s Blog series and I think it’s my best design yet in terms of aesthetics, accessibility and semantics. I don’t think I’ve reached the limit of my talents just yet either. I’m was so honoured that I was accepted into 9rules, I think it propelled me to just show that they didn’t make a wrong decision. I’m not the most precise or concise writer and I tend to deviate from the point I want to make but I hope that some of my points and thoughts get through on the topics I’m now going to concentrate on.
The new theme I think is very elegant although I’m not sure whether it is better centred as it is now or aligned to the left, as I planned it. Hopefully people will like it, but it’s more to please me and to boost my ego I suppose! So, that was the development of this theme from start to finish. Not very detailed, I’m sorry, but I keep forgetting to take screen shots of the development process and making an animated gif out of them as some in the past have. It’s 00:27 and Celebrity Big Brother is rather tedious. Goodnight.
December 12th 2006
Blogging, Internet, Programming, Technology
I’ve was invited to join the closed beta of the Israeli start up ClickTale. The service allows you to see a snapshot of what your visitors do and it records their mouse movements, actions and text input in real time. I was sceptical at first but although the beta service isn’t quite what they advertise on their main site, it has got most of the features and sure is something unique - and something I think could be very useful. I’m going to cover what features ClickTale provides, their uses and also the privacy issue that ClickTale brings to the table.
Mice Behaviour
There is a lot of statistic services out there that track your visitors, where they come from, where they enter from and how long they stay on your site - some even go as far as to provide a heat map of ‘hot spots’ on your site that are clicked more. But what ClickTale does is unique in that it tracks the mouse movements of the visitor around your site, whether they right or left click and also what text they enter into fields such as searches. It records these movements and allows you to see what the visitor is checking out when and where - where do they go as soon as the page loads?
This is useful to site owners because in order to optimise your site or service you first need to understand the habits of your users. ClickTale bridges the 
gap between eye tracking and statistics for websites. I’ve found that when I’m browsing a website, especially a text heavy site, I follow my mouse with my eyes as a reading aid. Watching how a user navigates around the site, how a user responds to links or images can be vital information for any site owner not only in designing the user interface but other style decisions.
Data Analysis
Having all the data being made into the movies of the users’ movements and actions is very nice but what ClickTale also does is provide a statistical analysis of the data it collects. Much like Google Analytics (although at time of writing much less advanced) it provides data grouped by country, language, browser, operating system, screen sizes and window sizes. Although the statistical analysis is not as comprehensive as Google Analytics or say AWStats, I think that the main feature of seeing what your visitors do could potentially be more useful and important. At the moment the analysis is limited to what I’ve mentioned above but I feel that a lot more could be done with the data.
The data could be transformed into a ‘heat map’ of mouse movement and actions - which parts of the page does the mouse move over most, which links are most clicked and which parts of the page are seen the most. Services such as Crazy Egg already offer a service that creates ‘heat maps’ based on where users are clicking. This is useful as it shows which links are used the most but tracking mouse movement could potentially be more useful. Mouse movement usually signals interest on the visitor’s side. In my own experience, if I’m weary of a link I hover over it first and see what it points to. If I’m not, I go straight to it. The behaviour of the user’s cursor can say a lot about how visitors perceive your site and provide suggestions on how you can make the user feel safer browsing your site.
Privacy Issues
Obviously, with the fact that visitors’ mouse movements, text input and mouse actions are all recorded, the issue of privacy arises. ClickTale battles 
some of the arguments about privacy by not recording password inputs, not recording any activity outside the web page, not tracking visitors between websites, not tracking any personal files, internet history or interacting with any local files or software. Also, only authorised people (people with the username and password) can actually view the recorded data.
Although the creators have good intentions for their product, it could be used in the wrong manner. Passwords could be captured via a normal text field, some crafty JavaScript and ClickTale. If the users are properly screened though, this could be avoided.
Final Thoughts
I love the idea of ClickTale and since trying it out on my own blog, it’s been interesting to watch the visitors’ movements, where they click, and how much of my posts they really do read! Although it’s been in closed development and testing since the early part of this year, it seems the wait will be worth it. In my case as a small blog owner, it has been interesting to see how the users interact with my bookmarks, seeing whether or not that use the lower part of the sidebar and also seeing whether or not they find searching intuitive.
Also, the fact that adding the service to your site is done by just two pieces of JavaScript means that site operators will find it incredibly easy to use. Once the user interface has been polished, I think that it would be a vital service for any serious website owner.
Oh, and a special thanks to Arik for giving me permission to write this review and including shots of the current user interface.
December 3rd 2006
Blogging, Life, Programming
I’m just posting a little advertisement really to let you all know about a script I wrote for Messenger Plus! Live. It’s my first piece of JavaScript that doesn’t use alert() so I’m pretty proud of it. It’s not much but I’m pretty proud of it to be honest.
It’s a simple and quick alarm/reminder script that is used by typing /reminder <minutes> in any conversation window. That’s all it is. It displays a notice when the time is up and also if your settings allow it, a pretty annoying sound is played (the phone sound distributed with Messenger). Hopefully in version 2.0 I’ll be adding custom reminder messages but I gotta learn that first!
http://www.msgpluslive.net/scripts/view/168-Quick-Alarm/Reminder-Script/
Sorry but this week’s News Roundup/Where’s Herbert?/Cluedo will be postponed a week. Had a lot of other things to do besides that like reminder script 2.0 and school work.
/images/9r_leaf.png "9rules Network")
