RB Music - Uncovered & Rediscovered Hits » CSS

Freelance

Richard — Tue, 25 Nov 2008 21:18:02 +0000

Most evenings during the week I am free for a few hours so feel its time to try get some little bits and pieces of extra work

Just put it out there if any one is in need of any web work – site updates, site creation, funky JavaScript effects, bit of php here and there anything at all really get in touch.

JShop Review

Richard — Thu, 30 Oct 2008 23:16:13 +0000

Ecommerce is something I haven’t really covered in any huge depth before but along came the opportunity at work to get stuck into making a shop online. At my old company we were about to start a site using JShop but the time came to move on. So a few weeks into my new job along came a project – an ecommerce site in JShop.

From my initial introduction into the backend of the system it seemed a little daunting but once you get used to where everything is, it all becomes a lot simpler – it also helps if you get yourself a copy of manual to flick through great little reference throughout the project, also if you have someone who has used the system before (cheers Pete) will help.

Most things you could possibly want to customize are included such as custom fields, extra fields for products/sections etc also you can turn desired functionality on and off with a flick of a switch in the backend – shipping type, tax etc. This makes for minimal need for hacks to both the core code and database which makes the implementation of JShop simple and easy.

Saying that if you do require to add code this is straightforward as long as you know your stuff (php/javascript), the code is clearly laid out so when I did need to make a simple tweak there wasn’t too much pain involved. Although I would advise not hacking too much as one it isn’t supported by Jshop – two it could hinder any future updates – which are free once you have purchased the license. I guess with custom code its knowing when you have added too much… always comment what’s been added you can always remove for an update and add back in.

Once you have mastered the backend functionality the only thing left is the templating system which is one of the best things I have worked with easy enough for a non developer to understand. Making loops/if else simple and adding anything returned from the database as easy as {customer.name} which allows you to create any look and feel you could possibly want. This is fairly laborious task but taking each page one at a time and adding your own styles the site soon comes together it would take a considerable amount of time to knock up each template from scratch.

I’m yet to decide if to start fresh css as wise as it doesn’t make the best use of it, a lot of time was spent adjusting font sizes, colours, sizes but for speed adjusting the two css files works just fine – the css is never going to be 100% but it works just fine…

If you do purchase and need any support the forums are fairly handy but the email support is even better I emailed with a fairly complex problem and the guys on there support team knocked up a template in order for me to allow me to achieve what I needed to… worth every penny!!

To sum up I would highly recommend this for any kind of shop you could want, a lot of thought has gone into what a shop might what to do and this is all made available – out of the box. This then allows you to spend your time adjusting templates to your own look and feel. The checkout process is smooth and clear it gives the customer complete control over there orders… Within the system I don’t think there is anything else you could possibly want to add unless you had really specialist processes involved in your order process if you want a shop online this gives you exactly that I don’t think you could want more – unless you are picky with minor details. The likes of play/amazon aren’t going to offer much more functionality wise (related products/reviews etc) to that what Jshop is going to offer, even if the processes might be slightly different.

To create something similar would take at least 5+ months development time perhaps…. With JShop out of the box to live site 15/20 days dev time the next one would be quicker.

You do the maths….

Check JShop out

Richard Bell

Richard — Thu, 23 Oct 2008 19:44:04 +0000

There is lots of talk what the developers role is and the difference between designer and developer – but why am I a web developer not designer?… Is there such a thing as a web designer?

As you can see from the title of this site I class myself as a developer but why? Put simply to make a website function you DO NOT need design it just makes it easier on the eye, prime example is cssnakedday (take away all design/colours/images and the site should still be workable). To get a website on the internet you do not need any design skill – a websites main role is the functionality and linking of pages – a lot of the time it would be better to strip the so called design.

The “designer” just makes the site clearer and gives it that warmth and ease of use for the visitor. From my few years experience a lot of websites are designed by people from a print background that have adapted with the change where designing for web is a completely different kettle of fish – some grasp it better than others.

I admit to not being the worlds best designer however I don’t think as a developer you can ignore what is looking good on your page and what is looking bad. When developing a site you see the same pages over and over again so I think this hinders your capabilities of a designer. If you are looking at the same thing over and over again repeatedly you are going to miss little things plus I’m concentrating on functionality of how to get things to function than the smaller design led changes.

For example if you had two days to develop a site I’m going to concentrate on functionality/coding and split my time according and make that my priority say 80% that gives me 20% to apply styles. That 20% isn’t going to be enough to apply all styles and design to a page

So I guess it comes to down to priorities if you are building a data driven website which requires functionality you need to spend more time to get it to work than applying the design as without the functionality you have no website at all – hence why I see myself as a web developer – that design means nothing if you have no structure it just helps a hell of a lot in getting traffic to your site.

Although design is an important factor without the development knowledge – you have no website. I spend a lot of my time creating layouts and styling using css – is this design? Yes but I’m yet to met a designer that can produce semantic HTML/CSS no doubt they are out there though. I could go on and on but I’ll leave it there…for today

Things I am not are “A techie”

MooTools preloading image rotator

Richard — Mon, 20 Oct 2008 20:31:22 +0000

I must have written six or seven of these bad boys since about January so I though one last time I’ll post it here and adapt it from time to time when I need it ! So here it is for both me any anyone else intrested

This takes a number of images pre loads them and will then fade between them

html

css

#image_rotator {
position: relative;
width: 100px;
height: 100px;
}
#image_rotator {
position: absolute
}

javascript

window.addEvent(“domready”, function() {

var images = $$(‘#image_rotator img’) //the image
var imgTotal = images.length-1;
var pos = 0;

//set up an array of image src’s we want to preload
var imgSrcs = new Array();

//loop through array and stuff the images src’s into an array to use next
images.each(function (el,l) {
imgSrcs[l] = images[l].src;
});

//check all our images from array have loaded then start calling fadeImages every 5 seconds
var myImages = new Asset.images(imgSrcs,
onComplete: function(){
fadeImages.periodical(5000);
}
});

function fadeImages() {

//if we are at the end of list of images fade out last 1 fade in 1st else we fade current and fade in the next
if (pos == imgTotal) {
fadeImgOut=imgTotal;
fadeImgIn =0;
pos = 0;
}
else {
fadeImgOut=pos;
fadeImgIn =pos+1;
pos ++;
}

//do the fading stuff
var fadeOut = new Fx.Tween(images[fadeImgOut], {duration: 2000});
var fadeIn = new Fx.Tween(images[fadeImgIn], {duration: 2000});
fadeOut.start(‘opacity’,[1,0]);
fadeIn.start(‘opacity’,[0,1]);

}

});