Renegade is a stylish, clean, free to download Photoshop PSD. This design would make a great online publication. The PSD includes the 960 grid system used to create it, along with clearly labeled folders and layers.

I big thanks to Orman Clarke for some of the UI elements.

Download PSD

After 3 flat tyres, 2 broken gears, 1 wipeout and a lot of lycra myself and 3 others are in the final stages of preparation for a charity cycle for MS Society. We will be cycling from London to Paris, a gruelling 260 mile trip to be completed over 4 days commencing on August 24th.

I am not often one to participate in charity events, the thought of jumping head first into a bath tub full of baked beans does not appeal to me, but when I heard about this great cause I thought I should take it upon myself to get into shape and raise as much money as possible for a great cause.

Our aim is to raise awareness for a charity that does so much great work but doesn’t have the same presence as other charities. One of the riders has first-hand experience with the support and advice provided by the MS Society due to a family member now being in the advanced stages of this degenerative disease.

We are very close to reaching our target of £2,000 and would be very grateful to anyone who can make a donation, no matter how big or small.

If you can find it in your hearts (and bank accounts) please give when you can!

Sponsor me

]]> http://theodin.co.uk/blog/charity/london-to-paris-charity-cycle-for-ms-society.html/feed 1 http://theodin.co.uk/blog/charity/london-to-paris-charity-cycle-for-ms-society.html http://feedproxy.google.com/~r/co/VazT/~3/CI4pSeyX4ZY/tagzy-tagging-jquery-plugin.html http://theodin.co.uk/blog/jquery/tagzy-tagging-jquery-plugin.html#comments Wed, 13 Jul 2011 21:42:30 +0000 philip beel http://theodin.co.uk/?p=2604 Tagzy is a jQuery plugin which enables you to add a highly visual tag input to any web page quickly and easily. If you have ever signed up for soundcloud or forrst you may have already encountered this approach. Try …]]>

Tagzy is a jQuery plugin which enables you to add a highly visual tag input to any web page quickly and easily. If you have ever signed up for soundcloud or forrst you may have already encountered this approach.

Try the demo

How to use this plugin

Setting up tagzy is quick and easy. First call in the jQuery framework and the tagzy plugin like so:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tagzy.js"></script>

Next create a hidden input which will serve to hold your comma seperated list of tags like so:

<form id='myForm' name='myForm' method='get' action='#'>
  <input type='hidden' name='tagged' id='tagged' />
</form>

To activate the tagzy plugin simply call it on the hidden field like so:

$(function() {
    $('#tagged').tagzy();
});

Download the plugin

You can download and use this plugin for free, however please be sure to read the instructions above clearly before posting any questions or comments about the plugin. Tagzy is hosted on github, so if you see any ways to improve or develop it further please get involved.

Download Tagzy

I would like to say a special thanks to Dan Whitfield for helping to put the finishing touches to this plugin.

I bought an A4 wacom graphics tablet sometime ago to get back into drawing. One of the first things I created was a superhero. Aside from this I never really did much with him. So I thought this would be a great opportunity to give him away for free.

Ideal as a website mascot or something more, this superhero is extremely easy to customise. The layered PSD comes in full size uncropped with no copyrights. Please feel free to download and share.

Download PSD

After a long break I picked back up on my fancy select options interface experiment. I was really inspired by the UI elements that zhanna provided for free over on forrst. I always liked the way Envato used large beautiful interface elements to navigate around their sites, my initial concepts draw from Themeforest quite heavily.

Big and beautiful interfaces

In modern web design form interaction is very important. Toolboxes such as jQuery UI have made up for the gaping holes of bad usability, but there is still a requirement for websites to handle the fabled drop down box and text input. If you have ever attempted the interactions with an iphone or ipad you will have seen a noticeable difference in the way interactions are handled. With my experiment I want to create something which not only looked good but felt enjoyable to use. Something tangible and clean.

Try the demo

Useability Considerations

More than just looking great it was important that the form could stand up to concerns over JS support and practical concerns over wide scale use. Where possible I have used HTML and CSS3 with a peppering of jQuery. Should the page be loaded on a browser which does not have javascript enabled there is a fallback and a standard drop down will be displayed. My main concerns are over the lack of form labels, something I would like to incorporate moving forward.

A sprinkling of jQuery

The real magic, if there were any, is the use of jQuery to control the actions of the select options. The code for which can be seen below.

//-------- populate form options
 $('#title li a.selected, a.trigger').live('click', function() {
 //check if the options are visible
 if( $('#title li a.option:visible').length > 1) {
 //hide the options if currently displaying
 $('#title li a.option:not(.selected)').hide();
 } else {
 //show the options if hidden
 $('#title li a.option:not(.selected)').show();
 }
 return false;
 });
 //check for selecting a new option
 $('#title li a.option:not(.selected)').live('click', function() {
 //change over the selected class
 $('#title li a').removeClass('selected');
 //apply this to the new selection
 $(this).addClass('selected');
 //shuffle the new selection to the top of the page
 $(this).parent().remove().prependTo('#title');
 //update the select option
 $("input[name='option']").val( $(this).attr('title') );
 //slide up the selected option
 $('#title li a.option:not(.selected)').hide();
 return false;
 });

Download the work in progress

You can download the work in progress from github, please feel free to fork it and add you own thoughts and suggestions, this is by no means a final product and there is plenty of room to explore this concept further.

Download Fancy Form

Creating the ‘ideal’ content management solution is a goal many businesses strive for. Having written my own and worked on several others I know the perils that can befall those who attempt such a feat. In this latest book Kae Verens takes on the beast.

Format

This book aims to enable the reader to build a working CMS by the turn of the last page. The author outlines objectives that the CMS must achieve and this sets the tone of the book. Broken down into clear sections which introduce the reader to complex concepts such as plugin management, access rights and security. All of this is maintained against the backdrop of working examples which the reader is encouraged to complete.

Prerequisite

The book is aimed towards developers who have a clear competence in PHP, javascript and a working knowledge of jQuery. This book is not a CMS for dummies, so if you are new to any of the languages described, then this book probably won’t be the right choice for you.

Strengths of the book

The author does a great job of outlining some key concepts when designing a CMS. Ideas around a core code base, which can be enhanced on a per business basis is excellent and the explanation of plugins and hooks for bespoke functionality was a topic which was very clearly explained. Tackling a subject of such a grand scale is always going to be tough and the author does a good job of outlining areas where the reader might want to expand beyond the scope of the book. I was also relieved to see that ajax was not over-utlised. The introduction of  of the Smarty templating language was also a great addition to the design patterns.

The drawbacks

This book does not come without its drawbacks, and though these are few, there were a couple of aspects, which I was not keen on. Directory structures is always going to be a point of contention. I have strong views on this and so will many other developers, so using one letter words for CSS & JS directories seemed a little foolish. Also areas around security were at times a little flaky, and if there is one area of building a CMS system that needs to be rock solid it is this. However that out of the way the book sheds light on a lot of important aspects such as planning and general design patterns around building such a complex system.

Final thoughts

Being a seasoned programmer I felt this book had a lot to offer, though there were areas which I did not personally agree with this did not stop me drawing a lot of useful information, and by the final chapter I felt that the book had been a worthwhile investment.

You can purchase this book from PACKT publishers or download the e-publication if you prefer.