My own website is finally up: webbeetle.com

04/02/2013

I haven’t posted here in a loooong time, because somehow WordPress (and the limitations which come with a free account) frustrated me.

I also have been busy with other things, among them doing jobs through various freelancing sites.
To advertise my services (and to finance our next trip) I have finally released my own portfolio site:

webbeetle.com & webbeetle.com.au

The last year I spent a lot of time to learn the ins-and-outs of “responsive website layouts”. This will be my main service. To find out what this includes please visit the link above. Right now I’m also setting up a new blog – surprise: I will be using WordPress for that, but on my own hosting account with my own responsive design.


Image types and their compression: 3. the gif

11/01/2010

This is the last of the image types I want to write about. If you are looking for an introduction please go back to the first post.

3. the gif image

The gif file is a real antique of the internet as it has been around since 1987. Its name is an abbreviation of “Graphics Interchange Format” [Wiki link] and it was invented by CompuServe as a cross-platform graphic. At its conception the 8-bit format and resulting limitation to only 256 colours was still well ahead of mainstream computing.

It probably reached the peak of its use in the mid to late 90s when almost every banner ad was created in this format, and thousands of animated gifs annoyed every visitor at low quality sites and bulletin boards. Here is a more “moderate” example; if you would like to see others feel free to google “gif animation”.

As soon as bandwidth became less of a constraint the inclusion of photographic pictures in digital media became popular. But the gif format is not well suited for photos due to its compression characteristics and low count of colour shades.

photo as gif, nearest web safe colour

photo as gif, nearest web safe colour (21kb)

photo as gif, dithered colour

photo saved as gif, dithered colour (47kb)

photo as gif, dithered and optimised colour

photo as gif, dithered and optimised colour (71kb)

same photo as jpg image

the same photo as jpg image (compressed only 21kb!)

As you can see the gif format doesn’t handle photos well (unless you like the strange “web safe” effect of the top image). The jpg format is best suited for photos!

But all is not lost: the strength of gifs are large areas of continuous colour and clear text, hence the gif still holds a niche in web design for some logos and where a graphic replaces header text. Since standard web design only allows for the inclusion of a handful of cross-platform and browser compliant typefaces a small gif with some text is a simple method to introduce a more personal typeface into your page. (More about typefaces in future posts!)

Here’s another feature of the gif format: you can set the colour count to less than the maximum 256, eg. the above image contains only 16 colours and resulted in a much smaller file size. I couldn’t save it as a 2-colour gif [black & white] because the writing looked too pixelated; I needed a few more grey shades to smooth the edges.

When you want to create such a text header gif another feature of this format is useful: you can specify a transparent background colour for the file so you can display your image on any background. This process requires a little experimenting if you do it for the first time, since you don’t want to end up with a few left over pixels of your gif‘s background, yet soon it gets easy. It is also somewhat flawed if you introduce extra effects like a dropshadow, which the gif cannot display very well. Due to its limitation to 256 colours you will lose the finer grading shades of your dropshadow; the png format is better suited for these images. Yet, if the image consists of plain colour on another plain colour the gif format is still a good choice.

Personally I would allow the gif format another niche as the “poor (wo)man’s flash” replacement. The option to animate a gif can come in handy for specific uses, eg. where you want to highlight a new item/section, or a call to action, or even in some technical context, eg. where you would like to show different viewing angles of a specific item (like the 4 sides of a car). an animated Beetle gifJust keep their use to a minimum and the animation relatively subtle.  Most software to create flash files [Wiki link] is rather expensive and involves a steep learning curve. There’s no other format around to create simple animations.

To summarise:

1. gif images are 8 bit and limited to 256 colours.

2. the gif format is well suited for images containing continuous colour, without gradients and other effects which push the colour depth beyond 256 shades (in which case you would use the png).

3. you can introduce transparency, eg. to make the background disappear.

4. a gif can be animated! This is (apart from more complex flash animations) the only image format to offer this option.

My next post will show a few more side-by-side comparisons of all three image formats and their compression.

Short link to this post: http://wp.me/pKLtW-4s

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine


Easy & Flexible Secure Passwords

01/01/2010

How many times have you been frustrated just because you couldn’t remember one particular password you need to get into a website which you don’t visit much?

My system for passwords makes it easy to remember any low-level access password!

I got frustrated with internet passwords years ago. Then, for several years, I used the same password for almost everything, until in late 1999 some Russian hacker got hold of this universal password and created quite some havoc because I had used this single password for my email, my domain registrations, some affiliate accounts, and a number of other important sites. This triggered me into developing this simple but effective password system, which I use for all sites with a low security risk (not for my emails, domain registrar, or online banking!).

In most cases a password system requires that you enter 6-8 characters, in very few cases no more than 8 characters, plus many automated password strength [Wiki Link] checkers require that you use mixed case letters and digits or they will reject the password.

How is the average normal human supposed to remember such a complicated combination? Specially since you’re not supposed to write down your password…
Easy: look for a 6-character core combination and then add 2 characters from the first two syllables of the individual domain name where you want to use this password.
numberplate Where do you find such a 6-character combination? Your vehicle’s numberplate (tags in US English) might be one place! If you want to make it more secure use the plates of a car you don’t own anymore.

Or you take part of a number from a document you always carry with you, like the number of your driver’s license (eg. DL1234), or even the telephone number of your bank (plus 2 characters of the bank’s name), or an outdated address (like your first flat in 65 High Street). Or make one up from a special date; just don’t use the your birthday or the birthday of any close family member, but a cousin or even an aunt should be far enough removed. Or use the day of a wedding anniversary or your dog’s birthday. For ease of use always keep the combination to 6 characters. So let’s say the date is the 5th of April 1987, if you convert this into “05AP87″ you have a mixed character combination of six, add to that a “w” and “p” for WordPress and your 8-character password might look like this: “w05AP87p” – with mixed case letters and digits!

7 8 KeyboardIs there a chance you can memorise this password? Most likely, particularly when you start using “f05AP87b” for Facebook, “y05AP87h” for yahoo, and a few other combinations with the same pattern for various forums and other sites you frequent…
Most importantly: you still create an individual password for each site. If you would like to have it a little more secure press the shift key for 2 numbers, so you might end up with “w05AP*&p” instead of “w05AP87p” (on a standard English keyboard).

A small table showing the password set-up and some variations of it towards the bottom of the table:
password table
There are plenty of different ways in which you can set up passwords using my basic system! You can move the position of the two letters indicating the domain name, you can replace most numbers with special characters (eg. 7=&), etc. I promise that you won’t forget any combination very easily once you start using a pattern like mine.

ATTENTION: Don’t use passwords created by the same system for internet sites where you keep very personal information or your money!

There is only a handful of sites where I use individual passwords, my bank and my domain registrar are two of them.

Finally a link to another password system, which can create more complicated passwords; beware: using this system you might be stranded on a foreign language keyboard due to different key location, eg. whilst travelling…

[If you want to replicate this idea or text on your website please feel free to do so providing you credit the source with a link back to either WebBeetle.com.au or Burgundysky.com! No link, no copying!]
Short Link: http://wp.me/pKLtW-3X

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine


My first WordPress frustration

31/12/2009

…and the second and third and forth and…

I think the guys (and gals) at WordPress should revisit their advertising – the header of wordpress.org reads:

WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability.

“focus on aesthetics”?  Then why is it that my image/text alignments look like shit? Yesterday night I spent well over an hour trying out all sorts of tricks to fix a problem I have on my 2nd graphics page. I can’t keep the text from sneaking up next to the images; all I want is a line break and all text following below! Why is this so hard??? (later: after wasting almost 5 hours on this I have found sort of a solution – not perfect but o.k.)

So WordPress is offering an HTML code view editor – ah, great – it doesn’t even accept a simple line break tagbr.
You call that “usability”?

Not to mention a comment tag ltto hide some elements from the pagegt.
This would have been great to play around with some spacer gifs (see below) = a comment is a fairly commonly used element, but all WordPress is offering is a more (which I cannot show here).

If I change the image alignment to ‘none’ or ‘center’ all the tiny images sit below each other, whereas I would like to see them all in one line.

If I insert a spacer gif (I’ll explain them in my next post about gif files) it only messes things up more  (currently there is one in the code – but it shows at a different spot than intended).

To add to the frustration: every time you save something the editing page and the preview page both reload from the top, so you have to scroll down and try to find your focus on the element you have just changed…

Finally some of the resulting code is almost as bad as the old Microsoft Frontpage shit – particularly once you start changing some formatting back-and-forth: it leaves tons of dead tags behind.

All I can say at this stage:
I’m glad that I have never attempted to use WordPress before, particularly for any web site which requires some “state-of-the-art publishing with a focus on aesthetics”!
I would have suffered my first heart attack from frustration, and probably would be bold because I would have torn out my last hair…

My wife says that all this frustration results from the fact that I know too much – LOL!

Blessed is the ignorance of the stupid because they can lead a life of untroubled bliss.

Even writing this was a pain in its execution, because I had to make graphics to show the HTML tags I needed to explain myself… Grrrrrr! Enough for this year!

Add to </p>
<p>Facebook”></a><a title=Add to DiggAdd to </p>
<p>Del.icio.us”></a><a title=Add to </p>
<p>Stumbleupon”></a><a title=Add to RedditAdd to </p>
<p>Blinklist”></a><a title=Add to </p>
<p>Twitter”></a><a title=Add to </p>
<p>Technorati”></a><a title=Add to Yahoo </p>
<p>Buzz”></a><a title=Add to </p>
<p>Newsvine”></a><img style=


Image types and their compression: 2. png

31/12/2009

This post is a continuation from my previous post – so please refer to the chapter about jpegs for an introduction.

2. png image

The Portable Network Graphic [Wiki link] is probably the flavour of the decade, if not much longer into the future. Most web developers love them for their capacity to achieve impressive compression results without any loss of quality – or so everybody claims… This is actually not entirely true! But:

png files will compress any vector based image much better than any other format suitable for internet publication! If you want to publish a photo with a lot of detail you are still better off saving it in its native jpg format. Unless you are a professional photographer, and you can afford the bandwidth, it doesn’t make much sense to save a photo as png – the resulting file size could be easily up to 10x as large.

Another constraint, you might encounter, is that many graphics programmes are fairly limited in their support of the png format; they will save in the png file format, but often don’t offer full support for all the features listed below.

All this said png files offer some amazing advantages over any other image file format:

  • png will compress all drawings, banners, buttons, and other vector based graphics much better than any other format,
  • png files are compressed with no loss of information,
  • you can set transparency to any colour in a png file (see samples below)
  • the png format offers full colour support of up to 48 bits per pixel,
  • a png file can also store an alpha value for each pixel, which specifies the degree to which the colour of that pixel is blended with the background colour,
  • png files can contain gamma correction and colour correction information so that the images can be accurately rendered on a variety of displays,
  • you can easily resize a png image without visible distortion (more about this use later).

The png format was actually developed with the intend to replace the gif format (my next chapter) – let’s see the differences:

button in png format

png file

button as jpg

jpg file

button gif file

gif file

animated button

gif animated

button png resized

png resized to 25%

button gif resized

gif resized to 25%

O.k., the first thing you will notice is that the background of the jpg is grey; that’s because grey was the background colour of the original image, with a jpg you cannot assign any transparency. With both, gif files and png files, you can set a transparency, like in this case where I made the background transparent because I want to place the image on a white page (the same would work with any other page colour). This is also a great feature if you want to change the colour scheme of your web site and keep using the same irregular shaped images (like bullets and icons): they will display exactly the same on your new background colour.

The other thing you might notice is that one of the gif images is blinking; that’s because I have animated this image (more about the process in my next chapter about gif files). What you might not notice with this button image is, that gif files are limited to 256 colours (8 bit colours). That wasn’t a problem in the days when they were first developed, because back then no computer monitor could show any more colours. Now most of us probably have our monitors set to 32 bit colour, or even 64 bit, in order to have the full spectrum when we view our photos or movies.

The final thing you will notice is that at the end of the row I have added 2 pictures at 25% of their size. Now I believe I have told you before that you should not resize images in the browser, but always make them to the size you intend to display on your web page – this statement is still true because for example a photo at around 2800 x 2100 pixels (roughly the size a mid quality digital camera produces) is ± 2,000 kilobytes (or 2 mb) in file size, the same photo resized and slightly compressed at 800 x 600 pixels will be most likely around 100 kilobytes = it will load much faster and save you bandwidth (for which you might have to pay your host).

So why did I resize these 2 images? Am I crazy? Not quite… You see, with a small element, which you might want to repeat on several of your pages, it is a different story: once you have displayed it the first time the visitor’s browser has downloaded this file and cached [Wiki link] it in its memory. The next time you show the same image, in its original size or resized, the user’s browser doesn’t have to reload this image another time – it doesn’t take any time and doesn’t use any extra bandwidth. For bullets and icons this is a perfect solution, because you can even resize a repeat image in another location on your pages. png files are very easy to resize, providing you keep the aspect ratios the same (eg. a 100×40 pixel image resized to 50×20, not 60×20 pixels!), and don’t show distortions if you do so (compare with the ‘E’ in the gif)!

To summarise:

1. png compression is free of any loss of information. You can also resize your png without distortions.

2. png is a great format for vector based images, like drawings, buttons, etc. It’s not such a good format for photos.

3. you can set many different values when saving your png, one of the most important is transparency, so that you can place images with a rounded or irregular outline (like icons) on any page background.

Next time I will write about gif files, and later I will add a side-by-side comparison of the 3 formats.

Add to </p>
<p>Facebook”></a><a title=Add to DiggAdd to </p>
<p>Del.icio.us”></a><a title=Add to </p>
<p>Stumbleupon”></a><a title=Add to RedditAdd to </p>
<p>Blinklist”></a><a title=Add to </p>
<p>Twitter”></a><a title=Add to </p>
<p>Technorati”></a><a title=Add to Yahoo </p>
<p>Buzz”></a><a title=Add to </p>
<p>Newsvine”></a><img style=


Image types and their compression: 1. the jpeg

29/12/2009

If you publish a web page you can insert different types of image files; the most common file formats are jpg, png, gif, and some might consider forms of swf (Flash files) as an image format.

If you’re confused which one to use on your page I would like to give some advice and demonstrate the differences.

Lets start with the one you probably know the best:

1. the jpg (or jpeg) image

pronounced: JAY-peg

Chances are that you own a digital camera, and the files on your camera are stored in the jpg format [Wiki link].
This format is best suited for photos or other graphics showing smooth variations of tone and colours.

In general a jpg file will compress reasonably well for display on web sites, but it is very common to see quality loss from compression. Be careful when applying compression to any image which contains shades of red or purple, as these tones show artifacts from compression the earliest!

image with 70% compression

The photo on the left has minimal compression applied to it, the second on the right is 70% compressed. The effect will show even better with text on an image.
Unfortunately I cannot show the full effect since the WordPress server is already applying a pre-set compression value to my images, so the ones with little compression look worse than intended!

text with 5% compressiontext with 70% compression
Take a close look at the different colours of text: obviously the red is showing the strongest noise from compression, white is still fairly clear, and the blue text comes out the best in this test.

So what can you learn from this?
1. You want to create your own header image for use on a web page: if you want to overlay a photo with some text, like the name of your business or the title of your web site, then you should choose a colour which compresses well so that your text stands out clearly; the best choices for this are black, blue, yellow, and white. – in most cases in this order.

2. The more shades of red you have in a picture the more difficult it will be to strike a good balance between compression and file size. In general you get nice and clear photos with a compression ratio of between 10-22%. Any more and most files will show the effects of compression.

And don’t forget to set the dpi value to 96 dpi – more about this in a later post (for today it has to be sufficient to know that monitors cannot display any more, and a higher value will increase the file size dramatically)!

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine


G’day! Sit back and relax…

29/12/2009

“You should have a Blog!”

Yeah, right… What for?

“It’s sooo much better for the SEO of your web site.”

Uhhm, and…? What would I write there? I have nothing to talk about which anybody would wanna read! So who would ever visit my blog?

Yep, all this was basically true until a few days ago.  So what changed?

I started a paid contract for a friend, who runs a small web hosting company. Actually, it’s not a web host as such, but a platform to publish your own web site using a template based content management system he developed. Right now he’s moving everything from an old server onto a bank of brand-spanking-new rack servers which he will keep in an air-conditioned cubby-hole in his garage. At the same time he upgraded to the latest PHP and SQL server, which is causing some problems with his code, so the move is taking much longer than expected.

He also needs help files for the entire system; you might know what programmers are like with writing help files! Most steps seem to be obvious to them, the rest of the steps they cannot describe without using some sort of jargon.

That’s where my new job comes in: I’m supposed to go through every function on his system, take screen captures where needed, and write a short and comprehensive help file. By doing this I’m also bug testing every aspect of his software (so we both hope!) so that he can iron out the PHP errors.

So here I’m waffling on, and you still don’t know why all this is a reason to start a blog.

You see, the system of burgundysky is meant to give novices an easy platform to publish their own web site. So we can’t assume that these clients know much, but on the other hand we don’t want to make the help file too long – ’cause if the instructions are too long it might look frightening to somebody who’s new to publishing their own web site.

The aim is to keep the help as short and simple as possible. Yet I discover so many topics where I believe I should insert some “hints” to make the process even smoother. Let’s say somebody wants to insert a photo. We all have seen pages where photos

  • are way too large and take ages to load;
  • or are too compressed and look un-attractive;
  • or worst: are resized to fit the website, but in actually fact the original file is over 3000 pixels, and only the width/height has been adjusted to fit the page.

To cover a topic like “Editing of Photos” would be well beyond the scope of an ordinary help file. Initially I had thought I could insert topics like this in a small box alongside the general step-by-step instructions, but it soon became obvious that some boxes would be too big and distract from the core topic on the screen. So now I think I will post these “hints” on my new blog and link to them from the help file.

There you have it: the reason for being – at least as far as this blog is concerned.

Oh, actually, there’s a second reason: I finally wanted to use WordPress. I know about it since 2003 or 2004, but never saw any real reason to explore it. If I create a web site I usually like to do it from scratch; I hate to be confined by someone else’s ideas of how my site should look, and which format it should take… All this is still true for “normal sites”, but I can see as well the use for a blogging software. In hindsight I might even have considered WordPress for our travelblog dare2go.com – but at the time I didn’t have the spare time to learn about some new software…

So now I hope that I have something to say that’s interesting and informative = a reason for you to come back (or even bookmark and share this blog – ghee – now I’m getting ahead of myself). ENJOY!

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine


Follow

Get every new post delivered to your Inbox.