• It should be affordable.
• Operation should be reasonably well automated.
• It should be easy to restore to one of several points in time.
• There should be some redundancy.
• It should be simple to store some backups offsite.
• Media should be encrypted for security.

The system described here uses an affordable drive enclosure to host two of three disk drives in a scheme that gives both disk mirroring and offsite storage all for a very affordable price of, roughly, £260. Of the three disk drives, two stay in the enclosure and the third is kept offsite and periodically exchanged with one of the two in the enclosure. Each disk drive is mounted in a drive tray (a one-off operation which requires nothing more than the use of a Philips screwdriver) which allows it to be easily inserted and removed from the enclosure. The enclosure is connected to a USB port on a computer and looks, to the computer, like a single large disk. I use 1TB capacity disks which allows me to securely store approximately 1,000 GB of data which is a lot even for a small business.

Operation

The drive enclosure is populated with two of the three SATA disk drives and attached to a computer (Mac, Windows or Unix) through a USB connection. A DIP switch configuration on the rear of the enclosure can be used to choose from a number of different configurations allowing the two drives to appear as either one big drive, two independent drives or a single drive using RAID 1 mirroring for increased protection against disk failure. This backup scheme uses the latter configuration, RAID 1, which employs disk mirroring in which the enclosure maintains an exact copy of its first disk on the second disk so that if either disk fails the remaining disk can continue operation without loss of data. If a failure occurs, the failed drive can be replace with a good drive and the system will automatically mirror the data to the new drive without any downtime. From the computer, the enclosure appears as a single USB (external) drive.

The second disk can be removed at any point and replaced with another which will be automatically mirrored with the contents of the first disk. The process of mirroring a 1TB disk takes about 3 or 4 hours but during this period the drive can be used normally. A green LED above a drive indicates that it is functioning normally, a flashing amber LED indicates that the drive is in the process of being mirrored and a red LED is indicative of a hardware fault with the drive.

Backup software on the computer populates the USB drive as it would any externally attached drive. I use the excellent SyncBackPro for Windows to pull files in from other machines on the network and write it to the drive but any archiving software could be used as appropriate for the platform.

Archival Storage

Some operating systems provide a mechanism for maintaining historical copies of your files within the file system. Windows does this with what it calls Previous Versions, and on Mac OS X similar functionality can be achieved by using Time Machine. Both these mechanisms enable fuller use of the storage space on the drive by keeping old versions of all files, even files that have been deleted since the last backup, for as long as space remains on the backup disk. Once the disk fills up these systems will automatically begin to prune back the oldest versions of files, keeping only as many old files as the disk can hold. Both of these mechanisms, Previous Versions and TimeMachine, will allow you to view the files in any backed up folder on your system as they were at several points in the past, typically at daily or more frequent intervals.

Redundancy and Offsite Storage

The enclosure keeps two drives in sync automatically so that should one of the drives in the enclosure fail the other one will continue providing read and write functionality without any interruption of service. This gives one form of redundancy, but by swapping the mirrored disk with a spare one on a regular, say daily, basis you get to maintain as many backup copies of your complete data as you feel comfortable with. It is easy to manage a small pool of spare disks which can be used in rotation. If we then keep one or more of these disks at a different location to the enclosure we have an offsite backup.

Very cheap USB caddies can be purchased which will hold a single SATA disk drive. These can be used in an emergency to mount any of the disks on a computer if the enclosure fails or if you need to access the data that is on one of the drives from a different computer or location.

Encryption

If securing the content of your backup data is important then the free open source TrueCrypt is an excellent tool. TrueCrypt provides on-the-fly encryption of an entire disk which means that data is encrypted or decrypted just before it is saved or loaded from the disk. The operation works transparently, encrypting the entire disk volume without any user intervention. Data is copied to or read from the encrypted disk exactly as it would be to or from an unencrypted disk. No data can be read from the disk until the correct password has been provided so if one of your disks is lost or stolen you can be confident that its contents will remain safe. The documentation on the TrueCrypt web site provides a step by step guide to installing and using TrueCrypt to protect a USB drive.

The decision to encrypt is an optional one and can be delayed until a later date. TrueCrypt software is such a good tool that I would recommend experimenting with it even if you don’t decide to use it to encrypt your backups. One of the modes of operation of TrueCrypt allows you to create an encrypted file on your normal file system which can then be mounted by TrueCrypt as a drive (or volume) on your computer. To the computer this looks like a normal external disk but has the advantage that all of the files that you write to the disk are securely encrypted and cannot be read without providing the correct password. TrueCrypt is software that I would be prepared to pay quite a lot of money for but it is open source and free.

Cost

The system I describe here costs roughly £260 (including the backup media) and provides 1TB of always available RAID and offsite backed storage – this makes it a very competitively priced solution for a small business or home worker.

I purchased the enclosure and extra drive trays from Dabs.com but the enclosure is also available from Amazon. The hard drives can be purchased from anywhere but should all be of the same capacity – Good 1TB drives can currently be found for about £60. The individual component costs for the whole system were:

With a total component cost of about £260, the benefits of this disk-based system over our old tape based solution are enormous not just in price but in flexibility and features. In short, it is a solution that I would recommend.

Related posts:

1. Quick Photoshop Tip: Save Space By Turning Layers Off
2. MySQL column truncation vulnerability
3. Partion Windows and Linux with GParted

Related posts:

1. Top 20 Websites and Search Engines in the UK
2. “Comic Sans” Virus (CSV) outbreak infects millions of websites worldwide
3. Website Life Cycle

One area that does cause loads of headaches though is transparent PNGs and with more and more of our designs using gradient backgrounds and varying levels of transparency in their graphics, it’s inevitbale that you’ll have to use PNGs as opposed to GIFs to achieve the desired look of the site.

There is a really good and simple PNG fix which I’ve been using for a while and all you need to do to implement it is this:

1. Get yourself downloading this JS file – PNG Fix for IE6
2. In your header, insert the following code:

   <!--[if IE 6]>
   <script src="js/pngfix.js"></script>
   <script>
   DD_belatedPNG.fix();
   </script>
   <![endif]-->

3. The function DD_belatedPNG.fix loads the png fix at runtime and all you need to do now is pass it each element that needs the fix applying. This can either be a class or an id for example:

   <!--[if IE 6]>
   <script src="js/pngfix.js"></script>
   <script>
   DD_belatedPNG.fix('img, .png_img');
   </script>
   <![endif]-->

Some Further Notes on this:

1. You cannot use ‘body’ as one of your elements
2. It doesn’t work on <TR> or <TD> elements, but this *shouldn’t* be a problem should it
3. <INPUT type=”image”/> doesn’t work but why use a transparent PNG for a form button anyway?

Related posts:

1. CSS NEWS – A quick catchup
2. Frog’s Christmas Countdown 2008
3. CSS for ABSOLUTE BEGINNERS – shaping up with CSS

What’s a CSS framework?

A CSS framework can help you achieve rapid development of websites, web apps and mashups. It eliminates repetitive tasks while prototyping designs by using a pre structured CSS/XHTML grid-based framework.

Main features of good CSS Framework is to:

1) Rapidly speed up our development time
2) Very small file size
3) Good documentation
4) A clean grid structure.

You will need a basic understanding of CSS to enable you to utilise the full potential of your chosen framework.

Frameworks currently available

960 CSS Framework

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 960.css file itself is only 3.6 KB compressed.

Tutorial: A Detailed Look at the 960 CSS Framework

Demo: Live Demo

Blueprint CSS Framework

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, nice-looking forms and even a stylesheet for printing. One of its main feature is performing a mass reset of browser default styles, offering a methodology to use for customizable layout grids and most important is that all elements are override-able.

Tutorial: A Closer Look At the Blueprint CSS Framework

Demo: Live Demo

The jQuery UI CSS Framework

jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.

Tutorial: jQuery UI CSS framework

Demo: Live Demo

YAML

Yaml (Yet Another Multicolumn Layout) focused on flexible layouts and offers column and grid based design elements for flexible, elastic or fixed layouts. You will need a license to use it.

Demo

Yahoo YUI Grids CSS

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Features include: Self-clearing footer, customization of width for fixed-width layouts, Supports fluid-width (100%) layouts and more.

Demo

Articles explaining CSS Frameworks

What’s not to love about CSS frameworks?
CSS Frameworks + CSS Reset: Design From Scratch
What Are The Benefits of Using a CSS Framework?
Blueprint CSS Framework vs YUI Grids
Battle of the CSS Frameworks
The Lessons of CSS Frameworks
When to use CSS framework?

Related posts:

1. Instant Blueprint – Create a website framework in seconds!
2. Grid Overlays to assist your website development
3. CSS NEWS – A quick catchup

Related posts:

1. Local paper makes it amongst global elite on Auguration Day 2009
2. Name the previous 43 U.S. PRESIDENTS before Barack Obama – then colour them in!
3. Artist Willard Wigan creates micro-sculptures that fit in the eye of a needle

A spokesman from Adobe said “This new redesign will revolutionise the way we design in the future. The new sophisticated layout and intuitive panels will help modern designers leave the world of Web2.0 behind and thrust the web into a new place, a place where animated GIFs will live happily with PNG’s and Serif fonts.”

Bill Bates, leader of the Anti-Adobe interface movement said… “It’s about time! I’ve always been a fan of Adobe in the past but when their new interface was released in 2002 I knew this would cast dark shadows over the traditional design era. Web 2.0 on the web is a direct result of that interface so we knew it had to go!”

He continued…

“Next is Microsoft 8′s new interface, it just sucks, and if left to spread amongst our unprepared nation we’ll all turn into f***……” *Interview cut short.

Let us know your thoughts, can this new interface really eradicate Web 2.0 from the web? Can this new interface really improve the quality of designs. And most importantly, would you pay £1,250.00 for the luxury?

Click to enlarge

Credit:Advertising Agency: Bates141
Creative Director: Hendra Lesmono
Art Directors: Irawandhani Kamarga, Andreas Junus
Copywriter: Darrick Subrata
Photographer: Anton Ismael
Published: August 2008

Related posts:

1. Starting out in RAW – Adobe Photoshop Lightroom 2 – First thoughts
2. CSS NEWS – A quick catchup
3. First look at the UK’s new ID cards

My Top 10 Most Used CSS Class Names

Many developers are puzzled when it comes to assigning class names to elements and often end up using wrong ones. Class names should not describe how the element looks like or where is it placed. A good class name should describe what a certain element represents. Here are my top 10 class names with explanations. Hopefully it will give you a clearer image of what kind of class names you should use. Read more…

9 CSS frameworks for faster templates building

Frameworks are already widely used for Javascript or PHP development, and it is getting popular for CSS templating. It improves your workflow and lets you set up templates quickly with cross-browser compatibility in mind. Here is nine frameworks to make templating faster. Read more…

The Woork Handbook

The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design… directly from Woork! Read more…

Useful resources to improve the look and features of HTML Forms

Are you looking for some useful tips to improve the look and features of your standard HTML FORM elements? In this post I suggest you some interesting resources about this topics. Read more…

Useful guidelines to improve CSS coding and maintainability

Developing CSS code for websites with a complex layout structure can be an hard work for a web designer. But in this situation, an harder work is writing code in order to simplify the continuous maintainability process. Read more…

CSS coding: semantic approach in naming convention

Naming convention in CSS coding is an “hot” discussion topic. In this post I want to illustrate some suggests and guidelines to use a semantic approach instead of a structural approach in naming CSS classes, analyzing the essential elements of a popular 3 column layout. Read more…

Creating easy and useful CSS Sprites

CSS sprites are a way to combine images to improve our page loading time, reducing the number of requests our server does. In this article I will teach you how to make them. Read more…

CSS SuperScrub

This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names. Read more…

Related posts:

1. Your CSS framework needs you!
2. CSS Box Model Hierarchi
3. CSS for ABSOLUTE BEGINNERS – shaping up with CSS

Rich typography on the web

sIFR (Scalable Inman Flash Replacement) is a mix of Javascript and Flash that enables a web designer to move away from the restrictions of on being able to use web-safe fonts and pick the one’s they really want to use. sIFR isn’t to everyone’s taste however, mainly down to the fact that it is heavy on server load, with the relevant Flash, Javascript and CSS files taking a meaty chunk out of the browsers performance. My current agency have taken the steps to ban sIFR from all future web builds, mainly due to these inefficiencies.

Those shoes are too big for you son!

This news broke my heart, the first signs of rich typography on the web and it’s taken away from me by technical issues. Whilst I argued day and night with the developers, asking them to look harder at a fix or an alternative my words seemed to be falling on deaf ears, so I, a mere designer whose job it is to merely ‘colour in’ and ‘stay between the lines’ decided to play sherlock and find an alternative.

Search for the Holy Grail

Well I didn’t find the Holy Grail, but I did find
FLIR (pronounced FLEER, Facelift Image Replacement).

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1>, <h2>, etc.) to <span> ) to elements and everything in between!

It looks exactly what I’m after! It claims to automatically find what needs to be replaced and where (presumably through standard markup tags like a H2), with it’s nifty Javascript. I can’t see any flash at all in it’s downloads section so again I presume it isn’t required.

Explore FLIR for yourself >>>

Related posts:

1. CSS for ABSOLUTE BEGINNERS – shaping up with CSS
2. SEO Best Practice – 13 Top Tips for Web Designers
3. iFrame Buster Script!

Yep the good old CSS box model, explained once more. The CSS box model is a fundamental element of modern web design that all web designers need to master. This CSS box model controls and details the behaviour of many HTML elements, such as DIV, P, ul, so understanding this is a firm step forwards to better web design.

3D CSS Box Model

Jon Hicks, who’s a leading figure in web standards and userbility, has created this brilliant 3D CSS Box Model diagram and kindly supplied the original Illustrator file for me to modify and put on the site for you to look at, so a big thanks goes out to him.

Related posts:

1. CSS for ABSOLUTE BEGINNERS – shaping up with CSS
2. The CSS Bible – CSS is your God!
3. Your CSS framework needs you!

CSS is an abbreviation for Cascading Style Sheets. Web designers use a CSS file to control the visual layout of a web page, grouping all styling declarations into one reference document while removing them from the HTML code that lies beneath the website.

If you’re an absolute newcomer to the scary world of web design and wish to start learning things from scratch then this is the place to be. Over the next few weeks I’ll be posting walk-through slideshows that explain CSS and XHTML visually, in an easy to digest format. This week it’s…

CSS help for absolute beginners

Shaping up with CSS

Credit: All copyright and materials Slideshare.net.

Think you’re a CSS Guru?

Well I guess your too good for this, it’s like child’s play, right? Well have a look at this, 10 CSS shorthand techniques you’ll use everyday, it will be more up your street.

Related posts:

1. Your CSS framework needs you!
2. CSS NEWS – A quick catchup
3. CSS Box Model Hierarchi