Typer Tappers

So if you are following websites to day, you notice the in thing seems to be sprites.

What are sprites?

Well their a collection of buttons/images held within one image, so for example if you inspect a icon image on facebook and look at the background you’ll see their sprite. Which can be classed as pretty much all their own images across the site, with enough room for hundreds more icons.

Its time to discuss reasons why you would use one of these sprites, the main reason is down to speed, the fact is instead of loading 10-20 icons separately you load them all at once making it more efficient within the way its called.

With this sprite you loose some margin for error, for example with things like Internet Explorer 6 I’m sure we’ve all done the thing of not putting sizes on images and having it mess up you’re whole site, using a sprite you have to specify a width and hight in the CSS so you loose the possibility of having them break your site design.

Hows this done then?

Easy just make your sprite then you might want to jot down the X and Y positions of where they are allowing you to find them later.

First off you want to make sure you have a spacer GIF.

<img src=”images/spacer.gif” class=”readmore” />

Thats your starting post, next comes the CSS.

background:url(‘images/sprite.png’) no-repeat scroll -20px -60px;

width:80px;

height:20px;

overflow:hidden;

Now their are more tricks than this, personally I would apply 2 classes one would have the background position and the other would have the background, this allows you to do some simple changes such as sprite name or even change the background to a GIF for things like IE6.

If you want to cut out all that finding x-y etc theirs some simple things out their to help you, like Sprite generators etc Google it and you shall find a abundant array of generators.

The Main Part Box & JavaScript

Well previously I posted on the basics of creating a lightbox, I shall explain the code for one of my most basic creations as once you understand this you can take it a lot further.

So I shall start with the JavaScript:

function lightbox(id1){
if(document.getElementById(id1).style.display==”block”){
document.getElementById(id1).style.display=”none”;
document.getElementById(‘lightbox’).style.display=”none”;
}else{
document.getElementById(id1).style.display=”block”;
document.getElementById(‘lightbox’).style.display=”block”;
}
}

Essentiall all it is doing is checking if id1 is already open if its shown as a CSS display block it will close id1 and lightbox id, else it will open them.

This keeps the script nice and short no bloated effects like Lightbox2 or jQuery lightbox, now in your html all you need to do is:

<div id=”mybox” class=”lightbox” style=”display:none;”>

stuff you want in lightbox

<a href=”javascript:lightbox(‘mybox’)”>Close Lightbox</a>

</div>

You can see I’ve set display:none; this is very important just because we are hiding the box, yeah not good for the search engines but for now it works, when you get more advanced I would have a class called hide, and apply it to the div tag just to keep google happy.

Now to open it:

<a href=”javascript:lightbox(‘mybox’)”>Open Lightbox</a>

So all we’re passing the function is the box ID (mybox) which will then open and we can use the EXACT same link to close it again!

Centering the Lightbox

Well we have the basics we now want it to have some nice effects.

.lightbox{
position:fixed;
height:200px;
width:500px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-250px;
}

So we’re setting the box as fixed so it scrolls with the page, and to get the full effect of centering it you need to set a height and width but when you enter the more advanced stages of lightbox you can just get the dimensions through JavaScript.

Now the essential part centering the box, top 50% and left 50% and then half the width and height which you can then offset in the margin, making it centered!

The Grey Background

Okay not the hardest part but it has the biggest effect, you can either have a white lightbox or black.

All you need is:

<div id=”lightbox” style=”position:fixed; top:0px; left:0px; width:100%; height:100%; background-image:(‘images/grey.png’);”>&nbsp;</div>

Your png file just needs to be 50% opacity #000000 and saved as a transparent png, this will then open when the JavaScript is triggered.

One thing that bugs me is these lightboxes and the lack of support on forums, you ask about lightboxes and they just link you to lightbox2 or ibox and all this junk which quite frankly is appaling, no one takes the time to explain the process of a lightbox.

My job recently involved constructing a lightbox, after a few days of racking my brains at other scripts I just put them in the trash bin as they where exactly as described trash bloated scripts for something I really dont need that much.

All I wanted was a fixed lightbox, nothing special like floating above the entire site, I wanted to click x and it would bring up some funky box.

So I just started thinking about it and essentially, its just 2 layers 1. your grey overlay and 2. your box you want.

Hopfully you can see with my porley constructed diagram, as you can see layer 1 is under layer 2 but they are both over the website… this really is all you need to keep in your mind.

The design element is just CSS, using z-index and position.

Now around about now your brain will be kicking in… the layer 1 isn’t fixed, right so this we will want to set as position:aboslute; top:0px; left:0px; then we want a background, 50% opacity #000 color .png this is perfect for the overlay (layer1) we can just repeat the background 100% height and width.

z-index, if your a old school css designer you will know this well as it is commonly usedin conjunction with absolute positioning, it allows you to basically say I want layer 2 above layer 1, so layer 2 you will have z-index:2; and on layer 1 you will have z-index:1;.

Once you have understood how the basics work you should be able to figure out the basic javascrip coding behind this,  for a basic understanding you could use <a> onclick document.getElementById(layer2).style.display=”  document.getElementById(layer1).style.display=” so before hand you will have layer1 and 2 set to display:none; and on clicking it you would then be able to see the lightbox.

Personally I have mixed my lightbox with some jQuery to make it a bit more funky, but from here it really is open doors to what you can do with a lightbox as your not limited by others coding.

So I recently purchased a new copy of Windows XP before I used to maybe re-format my hard drive every 1 year or so due to obvious reasons of windows lacking the ability to run well past the first year.

The usual stuff you had to do to keep windows running was a defrag, clean up temp files, empty the bin… well the list goes on and in reality we never did it. It maybe got cleaned once every 2 months if lucky, so I shall tell you how to do it automatically.

We shall begin with installing the usual, CCleaner and also put JKDefrag in your program files.

So we want to setup a simple batch file to run CCleaner and JKDefrag, you can however set JKDefrag to run when your screensaver appears but I can’t say I like screensavers that much.

Anyway we shall make the batch file (something.bat) in say C:\ (just for simplicity)  then in that we will put this in it

“%PROGRAMFILES%\CCleaner\CCleaner.exe” /AUTO
“%PROGRAMFILES%\JK Defrag\JkDefragCmd.exe” -a 2 -s 40 -d 2 C:

CCleaner has a auto function which will just clean what your previous settings where (I take it please correct me if I’m wrong).

and JKDefrag  will in order:

Defragment only, do not optimize. (-a 2)

Speed will be reduced to 20% (-s 40)

General progress messages. (-d 2)

Defrag C: drive (C:)

Now that is complete we want to open up Scheduled Tasks (Start >> All Programs >> Accessories >> System Tools >> Scheduled Tasks),and you can just follow the Add Scheduled Task wizard and set it up to run the bat file daily or weekly.

I take it you have heard about these new ultra mobile laptops (netbooks), well their not really new but they hit the blogs a lot when they came out, their was a lot of excitement over the Asus Eee laptop rightly so considering its a nice netbook.

Now me I’m too cheap to buy one at the retail price, instead I went one better and used ebay to buy myself a Compaq Evo N400c, now yes it might be 2-3 inches bigger but its a classic and repairable when something goes wrong, I’ve done a few fixes to it such as replacing the hard drive due to the old one failing unfortunately its a higher capacity but what you gonna do its all I had.

As I’m a complete computer nerd I did some upgrades and downgrades to it, I increased the RAM by another 256MB yep nothing in today’s standards but its still nice enough to run Windows 2000 without any trouble. As I just said I have Windows 2000 on it as XP was on it previously who puts XP on a laptop built for Windows 98 seriously? Well same could be said about Win2k but it runs quite well.

I’ve also replaced the nipple on the keyboard as it broke, but yeah its a really nice laptop to blog on, well it was untill WordPress updated it was really nice on it with the old layout , I was considering adding a wireless mini-PCI card in it but I ran low on money so I put up with a spare PCMCIA card which works perfectly fine all around the house, so its a really nice computer takes some maintanance but for a cheap bugger its perfect!

But I am considering buying the new Eee netbook, as I really could use something more modern and durable as its falling to bits, but I feel kind of dissapinted when I look at the Macbook 13″ as that has a massive battery life, and can be used as so much more than just a netbook but then you see the price.

Well for years not I’ve been wanting to try out Synergy, I just never got around to it for many reasons such for lack of a personal network and not many computers to try it out on.

But after working with computers for a few years not I’ve built up a few scrap computers, and some old laptops on the edge of breaking down.

So my current synergy setup is a old 1.8 ghz single core desktop, and a 800mhz laptop (which I’m grown quite fond of) but the mouse is broken on the laptops keyboard which pushed me to try out synergy as the small screen is perfect for writing blogs, checking forums and the whole social side of things!

My Desktop I use for designing/developing websites, so it has to run quite resource hungry apps (which is a struggle for it) so this also brought me to using two computers at once, so on my laptop I can just run my browsers to see how the website is coming along and on my desktop I can just have open Dreamweaver and Photoshop.

Now on to my network, so I run over a Wireless network (I know gimme a slap on the hand) this is quite a struggle sometimes as the router isn’t all that good and struggles with large loads so I would always recommend running synergy over a wired network just due to the performance of it.

I shall now move on to my personal review on it.

I can’t live without it, I love it.

Their are a few problems with it related to my wireless network but it really doesn’t phase me, what else can you ask for I’m using my z-board and desktop mouse to write this on my laptop!

If you use the hell out of your computers, or just want to see things across multiple screens without splashing out on another graphics card and monitor, you will want to try out synergy, you can copy things from one computer to the other without any trouble at all you can put a delay on the mouse changing screens (must have), it really is amazing.

Synergy 2

So I noticed Opera 10 alpha release, I have become more of a Opera fan over the past releases… maybe your asking why know what I’ll tell you why but you have to try it out as well.

Opera is not only a web browser its a complete Internet suite, you have a nice download manager, email client, RSS reader and you can even take notes. What more can you ask for really, you actually do get the whole package without having to mess around with installing add-ons for the browser.

But you cannot forget the security side of using Opera, at the moment Opera is a rather secure browser especially when comparing it to Internet Explorer and Firefox, this may change when it become more popular but thats the way things work unfortunately… just means its time to stop using Windows – easier said than done really.

So why the fuss over Opera 10.

Well when leaving Firefox really the only thing I missed was the spell checker, this I really found hard to live without it they did allow you to use aspell but I did install opera a lot so it made it rather difficult but now they have a spell checker built within Opera 10 making life so much easier when writing a blog or just catching up on forums.

Apparently the new engine it is built on is 30% faster at rendering website pages, which I have noticed especially on websites build quite heavily around Ajax like Google Mail and when using a laptop not built for performance it really does make all the difference, I found browsers like Firefox and Internet Explorer hung a lot while trying to load the resource hungry websites.

Unfortunately it is only a alpha release… but who cares I’m going to use it, I really have noticed the difference!

I don’t need to tell you though its Opera, try it yourself!

Opera 10 Web Browser

Freedom

So the other weekend I came across this smilie generator website, so I generated a smilie and pop up it comes “Hello World!” and in the bottom right corner BY A-WEBSITE.COM not actually that website its just a example, which kind of bugged me considering they also flooded the pages with adverts.

Seeing what I’ve seen from these adverts I set out to make my own website with freedom from the adverts, I looked at the options pay for a script which I believe was around $10-$20 for a rather simple script or I could have some fun and shuv my own script on a subdomain.

Guess what I choose, well if you guessed I payed for it, who are you kidding like I would spend money!

I built my own!

We can roll alright!

It took a matter of two days before I began the bug testing, now a few more days later and a few more coffee’s later its ready to rock and roll, I still have more I would like to add to them but for now I’m on a small break before I shart working on it again.

More features I’m working on.

1. A backend system to manage it.

2. Caching the images once hit from a outside website.

3. A caption box (after writing this its gone on my list thanks to wordpress).

4. More smilies.

Smilie Flag Generator

In my books their are three main CMS (content management systems), the main one is Drupal after that in order of my personal favorite is WordPress and Joomla.

Now if your a member of many webmaster forums you will notice people trying find which is better between Drupal and Joomla. Normally I like to respond by saying don’t be so stupid try them yourself or at least I’m thinking it!

They all come into their own in different fields, so I’m not going to feed you a load of crap on what is so good about them as you shouldn’t rely on any blogger to tell you what to use, you need to find out for yourself I’m just here to offer options for what you can use.

Joomla

Joomla, this is like Marmite you love it or you hate it their are those of us that like to take the development site of websites as well as design and this isn’t all that easily modified as its just such a large script, you really need to be able to rely upon the plugins you or someone else has created to modify anything within the script.

I wouldn’t use Joomla as I’ve said its you either love it or hate it, I’m not a fan of it mostly because its best used in large websites not small blogs or portfolios, which are the kind of websites I mostly run even so I would choose Drupal over it because I’m more familliar with it.

WordPress

Welcome to my wordpress blog and I’m proud of it, one of my favourite blogging systems is wordpress because its just such fun to use it makes writing enjoyable you don’t have to slave over notepad all day it makes life simple when editing, maintaining and building Blogs, it cannot compare to Joomla and Drupal it is in its own category and should only be used for blogging.

If your one of these that pays to convert your wordpress blog to a fully content management system, then in all due respect I can see why to some level as its just a nicely built. But I do not agree that it should be used for anything more than blogging once you take the step to move over to something else using plugins it becomes a rather tedious task.

Drupal

If you knew me you would realize that I like Drupal, the many of my other websites are using it as they are not large and require little to no management. First thing I did with them though was to install TinyMCE editor and thats about it really, I don’t need anything else it is so simple yet it has enough functions to support small websites it is just a pitty they don’t build in TinyMCE or FCKeditor within their system because it has become a nasesity with content management systems.

Over 120,000 registered drupal users

Now I have talked about mostly managing your website using these systems, but being a website designer I see them from a different point of view than most users, as I’m mostly working on designing the front ends which can be fun and sometimes isn’t.

So if you got the impression I like Drupal, I shall explain why now my last site built on Drupal took most of my time in Photoshop why because my time constructing the theme was so simple, you can just design one page and it builds everything around it. Yes you can do this with wordpress as well but it just isn’t as easy, it takes a lot more work and time fine tuning the layout.

I recommend trying them for yourself, don’t just listen to me waffling on about how much I love Drupal we are individuals and you need to find what you prefer.

If you take note of the date of my last post and the date of my current post many of you will notice that I have taken a long time off as I started running out of material to write about which could be noticed as my posting was all over the place about everything, which in some way I enjoyed, but many SEO readers would suggest that its a bad idea for the search engines.

So after my time away it allowed me to sit back and watch my statistics. Which in some way was helped by not posting anything or editing any of the website, I did try to keep up to date with wordpress updates to keep secure, which caused some trouble with some plugins. Such as related content links plugin stopping me from gaining more links within my websites own tree, but it didn’t effect the unique visitors as much as the spiders.

It allowed me to stand back and watch the main pages that I used for experimentation with my SEO, and then compare them to the ones that only have things like links within the website etc.

One of my most popular pages that was hit is about making your laptop battery last longer, I specifically remember doing this post as I payed a lot of attention to it as it was one of my main experimental pages as I focused on creating backlinks and their keywords reflecting back at my work I was able to see that this was one of the most important things within SEO.

This helps me to realize that running a blog to earn money is in fact a full time job, as you will be going over your writing making sure that you have put in all the keywords you can use.

Not only that you then have to be going all around social websites spreading your site, making sure you are keeping common keywords, then helping those websites notice your website.

Mind you this is just the first stage of producing a website and always the toughest stage, once you get past that and end up getting repeat visitors you are then able to relax.