Paint Shop Pro as a web designing tool?

Developing a web site requires little more than a sound understanding of HTML, CSS and notepad.  The first two require only your time and a willingness to learn while notepad or even an html editor like notepad++ cost nothing.  Designing a visually pleasing web site however requires an artistic eye and graphic editing software.

There is a multitude of graphic editing software applications available costing nothing (the Gimp) to costing thousands (Photoshop).  Somewhere in the middle is Corel Paint Shop Pro X2.

This article will discuss the feasibility of using Corel Paint Shop Pro X2 in the web site design environment.

 

Cost

Graphic editing software come in many forms. 

The flagship of bitmap editing software is Adobe PhotoShop.   Unfortunately Adobe PhopShop is incredibly expensive putting it out of reach of the amateur web site developer. 

The GIMP is an open source alternative, costing nothing.  The GIMP is a powerful graphics editor that offers many of the features found in PhotoShop.

Like PhotoShop, the GIMP has a steep learning curve and if you wish to use either of these programmes, you’ll need to spend lots of time practising and developing the skills required to use either programme effectively.

There are many cheaper and simpler graphic editors available but most of these, while being much simpler to use, are limited in terms of their ability to manipulate complex graphics.

Enter Corel Paint Shop Pro (PSP).  On the cost side, PSP is affordable costing a fraction of the cost of PhotoShop, but is PSP easy to use and does it offer enough features in terms of graphic manipulation?

The Paint Shop Pro learning Curve

Installing the 600mb heavy programme is easy enough, simply follow in on-screen prompts.  Open the program and you are greeted with the following screen:

The dark graphite skin takes a few minutes to get used to but then it is full steam ahead. 

Importing photos and graphics can be done in several ways; using the PSP organiser, using the open command or simply using the Windows drag and drop feature.

In terms of actual editing, the “Learning Center” pallet will help you make several common edits.

There is no doubt that Paint Shop Pro is aimed at the amateur photographer and as a consequence Corel has produced a product that is easy to use.  The programme is intuitive and with a few clicks you are able to achieve satisfactory results.  As with all software applications, the more time you spend experimenting with the programme the better will be your results.

Features, features and more features!

So while it does not require a three year intensive course to master the basic operation of Paint Shop Pro, does the programme offer enough features to make it a viable option in terms of designing a web site?

The simple answer is “yes”, the more accurate answer is “well it depends on what you want to do”.

So let us look at what Paint Shop Pro can do.

Layers

Like many professional graphic editing packages, PSP offers users the ability to develop their design using layers.

For people who have not used layers, they allow you to place each element of the design on its own layer which overlays one on top of the next to form a composite of the complete design.

Layers can then be turned on and off and edited or deleted, independent of the other layers.

The layer at the top of the palette is the upper most layer and is positioned above the layers below.  The order of appearance of the layers can be changed by the dragging the layers up and down the palette.

In addition, layers can be grouped together and objects can be placed independent of each other, on a single layer.

Layers can also be merged to form a single layer.

Selections

Paint Shop Pro also  has a highly intuitive battery of selection tools which makes it easy to lift objects out of photographs.  These selection tools work in a similar manner to masks in other graphic editing programmes.  Below, left, is a photograph I used for a recent project. 

For this project I wanted to lift the cow in the forefront to use in a banner for a web site I designed.   Using a combination of the magic wand and freehand selection tool it was a simple job to isolate the cow from the background.

Materials

PSP offers a huge array of materials for the web designer to use when creating backgrounds and other elements of a web site.

Colours can be chosen using the the pick tool, clicking on the palette, typing in the RGB value or by entering an html hex value directly.

Making gradients is a snap in the gradient panel.  The gradients can be fine tuned manually or preset gradients can be used.  In addition thousands of gradients are available for download on the internet.

Another great feature is the ability to use jpegs or any other bitmap as a pattern to fill in a background or object. 

Lastly PSP allows the user to apply a texture on any of the above mentioned materials so that you can easily add an additional dimension to your work.

Vector Layers

Perhaps one of the most useful applications of Paint Shop Pro is the ability to create vector layers where vector objects can be placed and manipulated with ease.  This makes the design process easier and faster as you have the ability to experiment with size, colours, border widths, gradients and so on without having to make multiple copies or loosing definition with each change.

Exporting

When you are happy with your design and want to cut up the picture to use in your CSS and HTML, both the crop tool or the selection tool make this easy.  Once you have defined your selection it is simply a matter of cutting the selection and pasting it to a new image.  Now you can export the image to a number of formats.  PSP also offers three optimised for web exports in the form of gif, jpg or png.

Other features

Needless to say Paint Shop Pro also offers all the other features you would expect from a photograph editing application.  Special effects, rotation, resizing, color adjustments and so on.

Where PSP falls short

Paint Shop Pro is not the perfect solution for the Web Design environment as there are areas where it is lacking in features.

Transparency

While it is possible to apply transparency to layers, PSP does not offer the ability to fine tune this transparency or apply the effect as a gradient.

Compatibility

A second area which may cause frustration is the inability to import projects from other well known applications like Corel Draw and Adobe PhotoShop.

In Conclusion

Can it do everything that PhotoShop can do?  “No!” 

Can it do enough of what an amateur web designer would need?  “Yes!”

Overall Paint Shop Pro X2 is a fantastic programme fulfilling about 95% of the amateur web designers needs.  Considering it’s cost, Paint Shop Pro X2 is a definite consideration when choosing a graphic editing application.

...read more!

15 Brilliant Resources for the Web Site Developer

Over the past year I have gathered a collection of 15 brilliant resources for the Web Site Developer. This article provides the link to each of these web sites and discusses what each one offers.

W3C

W3C offer three brilliant and essential services for the Web Site Developer.

Markup Validation Service

Use this service to determine if your HTML code meets W3C validation criterion. If your site is not up to standard you will be provided with a list of errors.

CSS Validation Service

The service checks to see if your CSS meets W3C validation criterion. Again, if there are problems the service will make a list of them.

Link Checker

Check links and anchors in Web pages or full Web sites.

Browser Compatibility

One of the most frustrating and sometimes difficult task of every Web Site Developer is ensuring that their web sites render correctly in all browsers. To further complicate the task, it is impossible to run all browsers on a single computer as many of them are specific to operating systems. Browser Shots solves this problem by providing screen shots of your web page as it is seen in different browsers.

Filler Text

When creating templates one often needs filler text to test how different font styles will look. Lorem Ipsum is often used for this purpose and the Lipsum website will provide you with as many paragraphs as you require.

Has your site been plagiarised?

The biggest fear of any web site developer, is that someone may steal their work and pass it off as their own. Copyscape will troll the world wide web and find any web sites that are a little to similar to your own.

Licensing your work

If you need to formally license material placed on the world wide web, then Creative Commons is the place to go.

CSS Play

Stu Nicholls is the master of CSS and his techniques have filtered through out the world wide web. His website CSSplay is one stop shop for finding fantastic CSS web site galleries, menus and a variety of demonstrations. Much of his work his free for personal use or requires a small donation.

Templates

People who are new to Web Site Developing may choose to first adapt a template rather than design and build one from scratch. FreeCSStemplates provides a huge resource of nearly 400 validating templates which have been superbly coded and may be used in any capacity, provided the copyright is retained in the footer of the template.

ICONS

Icons can be used with great effect on a web site but they can take an age to create. VistaIcons provides a huge resource of Icons which you can download and use. If you are using these Icons on a website, be sure to check the terms of use, as not all the icons may be used on web sites.

Images and Textures

When creating templates you may require images to bring your template to life. If you are not going to sell your template or are creating an example template for a client you may need images which you do not want to have to pay for. The following 5 resources provide just that, thousands of images, free for you to use. Remember to check the terms of usage though as different sites and photographers have different conditions of use.

Wikimedia Commons

MorgueFile

deviantART

stock.xchng

CGTextures

...read more!

PHP Include

Every web site needs a navigation system and maintaining this navigation system can be a nightmare, especially if your site has grown to hundreds of pages.  Each time you add something, or simply need to update a link, you have to open every page to update the menu.  The solution is PHP include.

Basically, the idea is that the menu is stored in a single PHP file and then an include command is used to include the menu on each page.  This means that when changes are made to the file structure of the site, only one menu file needs to be updated.  Sound good?

STEP 1

The first step requires changing each of your HTM or HTML files to PHP.  This is simply a case of renaming the file extensions, for example “index.htm” will become “index.php”.

STEP 2

Next you will need to create the “menu.php” file.  This file must only contain the menu, no <head> or <body> tags.

STEP 3

Last, include the “menu.php” file in each page you would like the menu to appear.

To do this you simply need to use the following command where you would like the menu to appear:

<?php include('../menu.php'); ?>

In the background, the server will place the menu code into each page that this command appears.

TIPS

Remember, you will need to ensure PHP is installed on your server in order for this to work.  If you wish to view your pages locally, you’ll also need to install PHP on your own computer as well as a local server.

...read more!

Creating a custom blogger template

Creating a custom blogger template is actually a fairly simple process.

This tutorial will show you how to adapt an existing HTML template for your Blogger blog.

Before you start, you will need a web page template. To ensure that this will work, your template must validate. You can use the following online tools to validate both the HTML and CSS.
CSS Validation Service
Markup Validation Service

For the purpose of this illustration, I am going to use the blue single column template which can be downloaded from here.



You can also visit the CSS templates web site and download one of the fantastic templates available.

STEP 1: SELECT THE "MINIMA" TEMPLATE

Open up the blogger dashboard. Click on layout, pick new template and select the "Minima" template.



Save the template.

STEP 2: DOWNLOAD TEMPLATE

Click on layout, edit HTML, and select Download Full Template.




Save the template file to your computer.

STEP 3: PREPARE THE LAYOUT

In your web page editor of choice, open up the HTML template which you plan to convert to a blogger template.

Remove all unnecessary code and text. For instance the blue template I am using is linked to a dynamic web page template, includes a search bar and has filler text, all of which, must be removed.



The resulting html codes looks as follows:

<body> <div id="main_wrap"> <div id="header"></div> <div id="content"> <div id="subheading"> <br> <h1>Life is a journey.&nbsp; Enjoy the ride!</h1> </div> <div id="colFive"> Blog contents to go here. </div> </div> <div id="footer"> Just another CHouseLive experiment! </div> </div> </body>

STEP 4: OPEN THE "MINIMA" TEMPLATE

You will notice that the Minima template you downloaded in step 2 is an xml file. Technically you can edit this document using notepad. To make life easier I use Microsoft Visual Web developer 2008 - Express Edition (VWD). This free program can be downloaded from the Microsoft web site.
Open the Minima template in VWD.

You will notice that this file can be divided into different sections. Like all web files (html), there is a <head> and <body> section.
The <head> section is then made up of two parts.

1. The general blurb about the type of document.
2. The CSS styles - called the skin

The skin can then be divided onto two parts, the variable definitions (which can be set from the blogger dashboard) and the template styles.

The skin is enclosed within the tags <b:skin></b:skin>
If you scroll down you will find the <body> section of the file.

The <body> is divided into 3 main sections:
1. header-wrapper
2. content-wrapper
3. footer-wrapper

These three sections are enclosed within the outer-wrapper. The content-wrapper comprises of two parts:
- main-wrapper
- sidebar-wrapper

If you look at VWD, you will notice running down the left hand side a line with little boxes showing positive and negative signs.



When you first open the file, all these boxes display negative signs. These boxes are aligned to opening tags and if you click on the negative sign, the tag will be closed, so that only the opening and closing tag is visible. To reveal all the code simple click on the positive sign.

To make it easier to edit the page, click on the negative sign which aligns with the following opening tags:

• <b:skin>
• <div id='header-wrapper'>
• <div id='main-wrapper'>
• <div id='sidebar-wrapper'>
• <div id='content-wrapper'>
• <div id='footer-wrapper'>
  

STEP 5: ADAPT THE "MINIMA" LAYOUT

The first thing you will need to do, is copy the code from your html template into the "Minima" template.

Copy the the code between the <body> tags of your HTML document and paste this below the <body> tag of the Minima template.

The code should look some thing like the following:

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml%2527 xmlns:b='http://www.google.com/2005/gml/b%2527 xmlns:data='http://www.google.com/2005/gml/data%2527 xmlns:expr='http://www.google.com/2005/gml/expr%2527> <head> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <b:skin>...</b:skin> </head> <body> <div id="main_wrap"> <div id="header"> </div> <div id="content"> <div id="subheading"> <br> <h1>Life is a journey.&nbsp; Enjoy the ride!</h1> </div> <div id="colFive"> Blog contents to go here. </div> </div> <div id="footer"> Just another CHouseLive experiment! </div> </div> <div id='outer-wrapper'><div id='wrap2'> <!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> <a href='#sidebar'>skip to sidebar</a> </span> <div id='header-wrapper'>...</div> <div id='content-wrapper'>...</div><!-- end content-wrapper --> <div id='footer-wrapper'>...</div> </div></div> <!-- end outer-wrapper --> </body> </html>

As the HTML template already has a header and footer, we can delete these sections from the blogger parts of the template.

Simply click on the <div id='footer-wrapper'>...</div> and press delete. (If you are not using VWD, you will need to select the code between these two tags and delete it).

Repeat the process for <div id='header-wrapper'>...</div>

Now using copy and paste, move <div id='content-wrapper'>...</div> so that it is placed in the section of the template where you would like the posts and sidebar to appear.

Move the following code:

<span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> <a href='#sidebar'>skip to sidebar</a> </span>

so that it appears above <div id='content-wrapper'>...</div>

Delete the remaining code which is no longer needed:

<div id='outer-wrapper'><div id='wrap2'> <!-- skip links for text browsers --> </div></div> <!-- end outer-wrapper -->

The resultant code should look like something as follows:

<body> <div id="main_wrap"> <div id="header"></div> <div id="content"> <div id="subheading"> <br> <h1>Life is a journey.&nbsp; Enjoy the ride!</h1> </div> <div id="colFive"> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> <a href='#sidebar'>skip to sidebar</a> </span> <div id='content-wrapper'>...</div> <div id='sidebar-wrapper'>...</div> </div> </div> <div id="footer">Just another CHouseLive experiment!</div> </div> </body>

Please note that between <div id='content-wrapper'>...</div> and <div id='sidebar-wrapper'>...</div> there is a lot of additional code, do not delete this!

Now that thing are in the right place we just need to tidy up the code. Look for any <br> elements and change these to <br/>. If you don't do this, blogger will not let you save the template.

STEP 6: CUSTOMIZE THE CSS

Next, you need to add the CSS elements for your template and customize the "Minima" styles.

Open up the CSS sheet which it attached to your original HTML template.

In VWD open the <b:skin>...</b:skin> tag so that all styles are visible.

Now copy the CSS code from your the sheet attached to the HTML page and paste it below the Minima styles.

If your style includes styling for the body links and other elements repeated in the Minima styles, you will need to delete the Minima styles for these elements.

You can also delete the Minima header, footer and outer-wrapper styles as these are no longer needed.
You will need to adjust the main-wrapper and sidebar-wrapper so that the sum of these column widths do not exceed the width of the new template.

After a little tweaking here is the code for my new template:

body { margin: 0; padding: 0; background: #CCCCCC; text-align: left; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: small; color: #333333; } a:link { color:$linkcolor; text-decoration:none; } a { color: #0E445E; } a:hover { text-decoration: none; color: #FFFFFF; background-color: #0E445E; } a:visited { color: #97CAFD; } a:active { color: #C0C0C0; } a img { border-width:0; } /* Outer-Wrapper -- */ #main-wrapper { width: 510px; float: left; word-wrap: break-word; overflow: hidden; } #sidebar-wrapper { width: 200px; float: right; word-wrap: break-word; overflow: hidden; } /* Headings -- */ h2 { padding: 2px; font-size: large; color: #31576F; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #1F536E; } /* Posts --*/ h2.date-header { font-size: xx-small; border: none; } .post { margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; } .post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; } .post h3 a, .post h3 a:visited, .post h3 strong { padding: 2px; font-size: medium; color: #FFFFFF; background-image: url('http://../navyshade.gif'); background-repeat: repeat-x; display: block; } .post h3 strong, .post h3 a:hover { color:#ffffff; } .post-body { margin:0 0 .75em; line-height:1.6em; } .post-body blockquote { line-height:1.3em; } .post-footer { margin: .75em 0; color:$sidebarcolor; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; line-height: 1.4em; } .comment-link { margin-$startSide:.6em; } .post img { padding:4px; border:1px solid $bordercolor; } .post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0; } /* Comments-- */ #comments h4 { background-position: left bottom; padding: 2px; font-size: small; color: #333333; text-transform: uppercase; text-align: left; letter-spacing: 2px; background-image: url('http://.../h4.GIF%27%29; background-repeat: no-repeat; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block .comment-author { margin:.5em 0; } #comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; } #blog-pager-newer-link { float: $startSide; } #blog-pager-older-link { float: $endSide; } #blog-pager { text-align: center; } .feed-links { clear: both; line-height: 2.5em; } /*Sidebar Content-- */ .sidebar { color: $sidebartextcolor; line-height: 1.5em; } .sidebar ul { list-style:none; margin:0 0 0; padding:0 0 0; } .sidebar li { margin:0; padding-top:0; padding-$endSide:0; padding-bottom:.25em; padding-$startSide:15px; text-indent:-15px; line-height:1.5em; } .sidebar .widget, .main .widget { border-bottom:1px dotted $bordercolor; margin:0 0 1.5em; padding:0 0 1.5em; } .main .Blog { border-bottom-width: 0; } /*Profile--- */ .profile-img { float: $startSide; margin-top: 0; margin-$endSide: 5px; margin-bottom: 5px; margin-$startSide: 0; padding: 4px; border: 1px solid $bordercolor; } .profile-data { margin:0; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; color: $sidebarcolor; font-weight: bold; line-height: 1.6em; } .profile-datablock { margin:.5em 0 .5em; } .profile-textblock { margin: 0.5em 0; line-height: 1.6em; } .profile-link { font: $postfooterfont; text-transform: uppercase; letter-spacing: .1em; } /*==my styles==*/ #main_wrap { border: thick solid #FFFFFF; background: #FFFFFF; width: 740px; margin: 5px auto 5px auto; } /* Font Styles */ h1 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: x-large; color: #FFFFFF; text-align: center; font-weight: lighter; margin-top: -16px; margin-bottom: 1px; } p { padding: 2px; font-size: small; color: #333333; text-align: left; } /* Header */ #header { background-image: url('http://.../logo.jpg%27%29; height: 117px; } /* Content */ #content { background: #FFFFFF; } #subheading { float: left; width: 740px; background-color: #1A4E67; border-top-style: solid; border-top-width: thick; border-top-color: #FFFFFF; border-bottom-style: solid; border-bottom-width: thick; border-bottom-color: #FFFFFF; } #colFive { padding: 0px 10px 0px 10px; float: left; width: 720px; } /* Footer */ #footer { clear: both; padding: 10px; background-image: url('http://.../navyshade.gif%27%29; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: x-small; color: #FFFFFF; text-align: center; border-top-style: solid; border-top-width: thick; border-top-color: #FFFFFF;

STEP 7: SORTING OUT IMAGES

If you have images in your template, you will need to make a plan to upload these to the web. If you already have a web site, simply store these on your site. Ensure that the relative links for these images point to the URL of where they have been stored online.

STEP 8: SAVING AND UPLOADING THE NEW TEMPLATE

Once all is done the final step requires you to upload the template to your blogger account.

1. Save the template
2. In the blogger dashboard, Layout, Edit HTML, click on browse and select your new template. Then click on upload.

You may be warned that widgets are about to be deleted. This is occurs because we deleted the the footer and header sections of the Minima template. If you have any widgets in these sections which you would like to keep, simply click on cancel, go the page elements tab and move these widgets into the sidebar. Then return to the Edit HTML tab and upload your new template.



You will need to delete the Header widget as this area is now part of the actual template.

Now you are done and hopefully have a fully customized blog.

If you have any trouble following these instructions, need a little extra help or just want to add your thoughts, please post a comment. I will do my best to answer quickly. ...read more!

CSS, hacks and conditional comments

In June of this year I decided it was time to upgrade my free Google hosted web.
Thus began my journey into the world of web design.  I felt I was well equipped for the journey, what with my sound understanding of html and my savvy computer ways.
Before setting off on this journey I prepared, I felt at least, carefully.
I scoured the net for articles relating to different HTML editors, looking for the best and most affordable software application.  Having tested several different application I eventually settled on Expression Web.
Once I had chosen the software to carry me on my journey I then set about plotting my route.  Again I looked to the net and discovered that anybody who knew anything was recommending css as the only path to tread.  This new method of layout promised to be flexible and in all things simply superior to traditional table layouts.

Now my course was set and so I began designing web pages.
My first attempts at a true css layout were not by any means artistic, although they could be called functional.
I was careful to test my designs in all the current browsers including Internet Explorer 7, Safari 3.01, Opera 9.51 and Firefox 3.0.1
After much work, I had finally created a web page layout of which I was proud.  In my opinion it looked sleek and professional.

I uploaded my 30 page web site and sat back expecting the world to sit up and take notice.
Actually, very few people took any notice at all except one kind Samaritan who informed me that my beautiful design looked bad in Internet Explorer 6.
I took a look and discovered the Samaritan was not delusional.  In fact IE 6 had mangled my design!

I went back to the infinite knowledge of the net and soon discovered that while css is the way of the future, pre Internet Explorer 7 browsers do not render css layouts correctly.
Why, oh why was this not mentioned earlier!
The first problem is that IE does not render the box model correctly.  The solution is to make the width of the boxes smaller.  The result is, once you have adjusted the sizes of the boxes, the page looks great in IE, but terrible in any other browser.
Back to the WWW.  A phrase kept popping up:  "IE hacks".
Further research revealed that IE does not read certain css elements correctly, no big surprise here, but these bugs can be exploited to create layouts which work in IE as well as other browsers.
To explain this further, consider the following piece of code:

#leftbarwrap{     background-color: #808080;     width: 550px;     margin-right: 5px;     margin-left: 5px;     margin-top: 5px;     margin-bottom: 5px;        float: left; }

Now, for some reason, IE is reading this block width incorrectly and forcing the right column to slip below the the left column.
A simple hack will look as follows:

#leftbarwrap{     background-color: #808080;     width: 550px;     *width: 545px;     margin-right: 5px;     margin-left: 5px;     margin-top: 5px;     margin-bottom: 5px;        float: left; }

See that star?  Well IE does not see that star and thus sets the width of the box at 545px.  All other browsers sees that star and decides that it is rubbish, so it ignores the line.  The result, the ability to define two sets of rules, one for IE and one for other browsers.
Seems like a good solution, except using this sort of code results in your otherwise perfectly coded page not being CSS valid.
Back to the drawing board.
I then discovered conditional comments.  Elements placed within conditional comments are only read by IE and ignored by other browsers.
The following red paragraph only appears in IE browsers:

This works because I have placed the box within a conditional comment.
The code looks as follows:

<!--[if lt IE 7]>        <div id="conditional">     You are using an older version     of Internet Explorer to browse     this site.     <br>     Unfortunately, despite my best     efforts, Internet Explorer 6     and lower renders elements of     this design incorrectly.    <br>     If you wish to view this site     as it was intended, please     upgrade to Internet Explorer 7.     <br>     Alternatively, download the     superior Firefox and enjoy an     enhanced browsing experience.   </div>         <![endif]-->

Notice the <!--[if lt IE 7]> and <![endif]-->
This little bit of code allows certain element to be rendered only by Internet Explorer browsers less than version 7.
This allows us to call up a specific style sheet when a particular version of Internet Explorer is being used.
And thus we can create style sheets specifically for IE.
A second problem now arises.  If you are running Vista, you can't have IE 6 on your computer, which makes designing web pages for IE 6 and less rather difficult.
I have yet to find a practical solution to this.  And so the journey continues...
Here are a few web sites to help with this journey:
Browser Shots - This cool service will take screen shots of your web pages as is seen in a multitude of different browsers.
CSS Validation Service - Use this service to test if your CSS style sheet validates.
Markup Validation Service - This service will check to see if your html is valid.
In conclusion, life is a journey . . . enjoy the ride! ...read more!

Setting up a new laptop?

Every now and then I find myself setting up a new laptop for colleagues, friends and students.

As there is limited information available as to how to go about this, I have decided to document the steps which I follow.

STEP 1: Deciding what to buy

The first step requires spending money. You need to buy the laptop. What you buy is highly dependent on your budget.

When purchasing a laptop, brand names are the way to go.

Sony

Sony make lovely laptops however they are over priced when compared to other laptops with similar specs. They also install a massive amount of bloat software which runs their DVD drives and so on, so you need to be careful before uninstalling. Another annoying Sony feature is that they like to keep things in house. I.e. they have a memory card reader that only reads Sony type memory cards. In South Africa their customer support is -2 on a 1 to 10 scale, which is also a big problem. I think with Sony though it is a bit of a customer loyalty thing so if you already have a Sony camcorder, Sony digital camera, Sony DVD recorder and so on, then buy a Sony laptop as everything will work nicely together.

Lenovo

Lenovo make good laptops for the business person although again a little over priced.

Toshiba

Toshiba have a variety of laptop ranges. The bottom of the range is really nasty so keep away from them. The top of the range laptops are highly over priced when compared to other laptops with similar specs. The mid price range are actually very good value for money. The hardware is good giving few problems (although their speakers are terrible). The laptops are robust and can handle lots of packing and carrying. They also have a good shelf life so you tend to have to replace because the software is outdated, not because the screen broke.

HP

HP make super laptops, offering average customer support. If something goes wrong, you are left without a PC for 4 to 6 weeks while they fix it. They are also slightly over priced but not enough to stop one buying! The hardware is not to bad, although I have had problems with their hard drives and cooling issues with the Pavilion Series. Compaq are owned by HP and while they used to make superb laptop 10 years ago, you are better off just getting an HP.

Fujitsu Siemens

Fujitsu Siemens probably offer the best value for money. Impressive specs at low prices. I personally have kept away from them as their cases look a little dodgy and I hate shiny silver plastic buttons that feel like they they are going to break any moment.

Acer

In South Africa, Acer win the prize for best customer support. They are excellent. They are happy to pick up your laptop, repair and replace broken bits. Technical support have people who know what's potting and can actually help you. Their prices are good. At work we have four of these laptops ranging from the cheap and nasty to the tablet series (very expensive). All of them work well and have stood the test of time. Only issue is that on all the laptops, over time the finishing of the cases wear badly. The gray mat look slowly becomes polished black.

Dell

I am currently using a Dell Latitude. Better casing than any of the above mentioned, except maybe the Lenovo. After many complaints, Dell seem to have heeded the call of the consumer and no longer load their laptops with all sorts of bloat software as found on the Sony, Acer and HP laptops. Price was a little higher than an Acer would have been, but less than a comparable HP. Only down side (this could be a South African thing) customer support is lacking. If you want anything done, you literally have to phone Ireland! Local support is manned by idiots who can't even tell you where to download the user manuals.

LG

LG also make a lovely looking laptop, but they are over priced and as yet I am not prepared to pay a small fortune to a company that was formally called Goldstar and made dodgy TV sets.

Above, you have a concise review of some of the better known brand names. At the end of the day it is all a matter of opinion so let us look at something that is less objective, hardware specifications.

The best hardware specification depends on two things:

1. Operating system - I shall assume you will be purchasing a laptop, pre-installed with Windows Vista
2. Intended use - general using including typing documents, editing photographs and watching the odd DVD

If you are purchasing a laptop with Vista, the following is a must:

• RAM - a minimum of 1 gig, 2 gigs are preferable
• HARDDRIVE - a minimum of 80 gigs, but 120 gigs is becoming the standard
• DVD DRIVE - DVD RW (you need to be able to burn DVD's these days)
• PROCESSOR - this is difficult as different brands use different measurements but I personally like INTEL, Centrino Duo processors
• USB - make sure you have at least 3 USB2 ports

Other things which you should make sure are installed, although the exact specifications are not to important for everyday use:

• Wireless
• Average graphics card (the better the graphics card, the better the laptop, but the worse the price!)

Other things (like camcorders, thumb print readers and card readers) are just cool extra's which will push up the price of the laptop.

STEP 2: Setup Vista

Once you get home with your new laptop, first step will be setting up Vista.

Laptops are easy to setup as the operating system is already pre-installed. All you have to do is turn on the machine (remember to attach the battery first) and follow the on screen prompts which will walk you through setting locations and creating users.

STEP 3: Disable User Account Control

If you are new to Vista, you will notice that every time you want do anything, from copying a file to installing a new application, Vista brings up an annoying windows asking you if you to give permission. This becomes very irritating, so it is a good idea to turn it off.

Click on start (round windows button on the taskbar).

Then open up the Control Panel and click on User Accounts.

Now click on Turn User Account Control on or off.

A new window will open where you can disable the option to use User Account Control. When you are done, click OK.

Vista will warn you that it is very dangerous to turn off UAC, but don't worry, your computer will only function better without it!

STEP 4: Getting rid of bloatware

The next step entails removing bloatware (pre-installed software bundles, mostly consisting of demos and trial ware).

Your laptop will have a variety of software bundles which have been pre-installed by the laptop manufacturer. This software will range from trail versions of anti-virus software to Microsoft works.

The easiest way to do this, is to open My Computer (Click on start, computer or press [windows] [e] on your computer).

Click on Uninstall or change a program.

To uninstall a program, click on the programs which you want to uninstall and then click on uninstall/change. Then follow the on screen instructions.

Make sure you do not uninstall drivers. If you are unsure, leave it, but a lot of software is unnecessary.

To make a comprehensive list of all the bloatware applications would take a life time, but here is a list of common applications which can be removed.

• Adobe acrobat reader
• Any HP software
• Microsoft works
• Any trial software
• QuickBooks Trial
• NetZero Installers
• Earthlink Setup Files
• Corel Photo Album 6
• Tiscali Internet
• Dell Search Assistant
• Norton Ghost 10.0
• Symantec Live Update
• MS Plus Digital Media Installer
• McAffee
• Norton Internet Security
• Google Desktop
• AOL US
• AOL UK
• Wild Tangent Games
• Norton AntiVirus 2005
• Norton Security Center
• Norton AntiSpam
• PC-cillin Internet Security 12
• Run Registry Entries
• Desktop Icons
• Corel WordPerfect
• Roxio RecordNow
• Sonic DLA
• Sonic Update Manager
• Sonic RecordNow Audio
• Sonic RecordNow Copy
• Roxio MyDVD LE

Once you are done. Turn off your PC, count to 10 and then restart the PC.

STEP 5: Defrag

Now that you have removed all this software, it is a good idea to do a defrag. The problem is, Vista's defrag application take hours.

An alternative is Auslogics Disk Defrag. You can download the program and install it. Then run the application.

STEP 6: Installing other software

Once the defrag is completed, you can start installing useful software.

Below is a list of some of the things I recommend. Most of them are free and you can download them by clicking on the links.

Anti-Virus

There are two free antivirus programs worth mentioning here. Which is the best? Well that is a matter of opinion.

• AVG
• Avast

Applications

• Compression: 7Zip
• CD/DVD burning: InfraRecorder

Graphic Manipulation

Faststone Image Viewer: Fastsone image viewer is one of the nicest graphic browsers I have used. It is light on resources while still offering a range of editing options which include resizing , cropping, batch scanning to name a few.

Internet Browsers

Mozilla Firefox: I have been using Mozilla for about 6 years. Initially I used it because it offered tabbed browsing and a Google search box and while these features are now available in IE 7 and above, Mozilla remains my first choice.

Office Suites

At some point every body needs to type a letter and a good word processor is what you want. It makes sense to have an office suite which includes word processing, spreadsheet and presentation software.

Openoffice.org: Openoffice.org is a super open source alternative to MS Office.

PDF readers and writers

If you ever view documents on the net you will have noticed that they are often pdf documents. There are several pdf readers available for download, the best known being Adobe Reader. Over the years this has become an unnecessarily large programme. Here is an alternatives:

• Foxit PDF Reader

You can create your own pdf documents using cute PDF

STEP 7: Have fun

Now you are all set up and can enjoy your new laptop.

...read more!

Software Update

A few years ago I made the decision to only run legal software on my PC.

Since then I have discovered that their are many excellent open source and free applications around.

An excellent alternative to Microsoft Office Suite is the OpenOffice.org suite. I recently found out that Novel have there own version of Open Office. It has a couple of features worth mentioning.

1. Supports the new MS Office 2007 formats
2. Load quickly
3. Supports VBA macros

This version of OpenOffice can be downloaded from here.

If you would like to read more about the pros and cons of the OpenOffice suite, this Tech Support Guy thread is interesting.

If you are looking for a good, free, PDF "printer" have a look at Bullzip. Basically it allows you to print any document as a PDF. What I have found most useful about Bullzip is that it allows you to direct output of different documents to the same PDF file.

For other suggestions with regards to free or open source programs have a look at my Software page.

...read more!

What program to use when teaching web site authoring

The question has been asked, "when teaching IGCSE Information & Communication Technology (ICT), what is the best program to use for creating web pages?"
Until recently I used front page, however I have now changed to Expression Web 1 (EW1).
My reason for changing was based on two factors:

1. Front page is now 5 years out of date
2. Front page produces code which is based on the Internet Explorer engine and as such many things do not work well (pages do not display correctly) in other browsers like Mozilla, Opera and Safari. So while Front Page is capable of creating pages which fill-full the basic requirements of the IGCSE ICT syllabus (with a few html edits) it is not a programme that would be recommended to anybody who actually wants to create a half decent web site.

I looked at several "what you see is what you get" (WYSIWYG) web site authoring programmes, including Coffee Cup 2008 html Editor, Serif Web Plus X2, Dreamweaver CS3, NVU, and Komposer.

Naturally Dreamweaver stood out as the leader in the industry. The cost is $399 (about R3200) so purchasing even one licence, let alone 20, simply made this a financially impossible solution. I did look at the educational licensing options; however, it appears that Adobe does not believe that there are schools in Africa! Be that as it may for USA and Canadian schools the cost is $199 (about R1500), still way out of my budget.

Serif Web Plus X2 was a consideration. The retail price is $79.99 (about R650) and they offer excellent educational licensing options. I downloaded a trail version, however it proved difficult to produce the required code and I found attaching style sheets nearly impossible (it may be possible, I only played around for a couple of hours).

Next I looked at Coffee Cup HTML Editor 2008. It costs $49 and produces clean code which easily lends itself to manual editing, however it worked better with internal style sheets than external. It also did not appear to have a style editor (may have and I just never found it).

Considering the cost of the commercial packages I decided to see what the open source community has to offer.

NVU is open source; however, it has not been updated for several years. It does not have a style editor, but as it costs nothing, the options of teaching the kids to create their own CSS files (something I do anyway, although weaker candidates experience great difficulty memorising everything) or having them use a separate css editor application are easy work-arounds. The steep learning curve required to master this application put me off.

Komposer, the unofficial NVU update is a lot easier to use, however once again it has been a few years since it was last updated (2006) and some features do not work properly.

I also considered having the students create web pages using only notepad, however I felt having students memorise code (for instance the standard html header) unnecessary. I have done a little web page design myself and while I tend to use coffee cup free html editor (not WYSIWYG) I copy and paste a lot, especially standard headers, which is not an option during examinations.

I then looked at something I already have, Microsoft Expression Web 1 (EW1). Our school purchases an annual Microsoft volume licence which includes EW1. Sadly it is already out of date, however EW2 is now available. Like all Microsoft products it is expensive, $299 (about R2500).

As an aside, schools should look into Microsoft volume licences. For 20 computers we pay about R5000 each annum for a license which includes the latest Microsoft operating system, office suite and a few other things.

I eventually decided to go with Microsoft Expression Web for the following reasons:

1. EW produces code which is fairly compliant with current web standards and works in most web browsers
2. EW supports external and internal style sheets
3. EW allows for easy manual alteration of the html code
4. Students who have learnt to use EW will be able to use Dreamweaver without to much trouble

As is my custom, before teaching a new programme, I first ensure I can use it myself. I have always felt the best way to learn how to use a programme is to have a project.

As the ChouseLive web site grows the need to move it from Google Page Creator (GPC) to a regular web hosting option is becoming more apparent. I decided to use this for my project.
My idea was to replicate the ChouseLive web site in EW so that when I get around to signing up a web hosting account, I will have the site ready to upload.
As GPC is an online web site editor and the base templates form part of this application I needed to build the site from scratch.

EW has proven to be an excellent application.

At first I was a little concerned that EW would turn out to be nothing more than FrontPage's big brother. I had no need to fear as it soon became apparent that EW is a whole new programme more similar to Dreamweaver than FrontPage.

Once I got the hang of things I started experimenting with css layouts. Previously I have always used tables to layout my pages, however I decided it was time to change.

I have a copy of the Html, XHTML, and Css Bible - 3rd Edition. I started reading through this but after about two minutes became bored so instead went online. While there are many excellent CSS tutorial available online (Google lists 13500) I also became bored with these and resorted to downloading and experimenting with different templates from the freecsstemplates.org web site.

Once I got the hang of how these templates work I set about creating my own css file. This proved incredibly easy. EW allows one to do anything! The style editor is easy to use and sets out the code in an easy to read format that allows for optimal tweaking as is required.

Next I built a basic page. Once I had linked my style sheet this too proved easy. I abandoned the design view and simply set things out using the html view. EW interacts superbly with the style sheet, providing time saving drop down boxes listing the different styles you have already defined in the style sheet.
I am delighted with the result.

...read more!

Editing Photographs

I had a little fun playing with photographs last night.

A colleague asked me if it was possible to take the following photograph and remove the gorilla, kids and door so only the boy playing the marimba is left.

Now, I have not done much of this sort of thing before, but I figured it must be possible.

I have Corel Photo-Paint 11 (CPP11), which I know has some photo editing features that probably can do the job.

I started by importing the photograph into CPP11. I then, using the cut out tool, cut the Marimba Boy out so that I had a picture with out any background what so ever.

I then attempted to recreate the room without all the additional features. I made the carpet using a portion of the original carpet as the "paint". I repeated this process with the wall. Everything looked to smooth so I used a noise filter to add a little texture.

When I was done, I copied the boy back into the room. On the boy I used the feather tool so that he blends in a little better.

The final result:

It is not perfect as it looks a little artificial. I am not happy with the "halo" around his head either. That said, for a first attempt, it is not too bad either.

We will not be using the edited photo, but it was a great project in terms of learning new things!

...read more!

Creating A Slide Show

Want to create a slide show of all your holiday pics that will play on a stand alone DVD player?

The good news is, if you have Windows XP or Vista, you already have most of the software you need in the form of Widows Movie Maker. This little application is capable of editing movies and creating super photo slide shows with funky transitions, neat title and credit slides as well as allowing one to have inspirational music playing in the background.

The only snag is, if you want to put your final product on a DVD to play in your DVD player, you need to convert the files, which WMM can't do. Fortunately there are lots of ways around this.

About 6 months ago I experimented with a variety of free applications and came up with the following:


How to create a slide show for DVD output using 100% free software.

This is a multi step process.

What software do you need:
-Microsoft Movie Maker (MMM) Version 5.1 (2.1) - Part of the Windows XP service pack 2 or higher.
-DVD Flick - can be downloaded from: http://www.dvdflick.net/

Once you have got the required software you can begin.

Open up MMM.
Ensure Tasks pane is visible. If not click on the tasks icon at the top of the window.
Set the time you want each slide to display. [tools] [options] {advanced}
Import pictures
Import audio or music
Experiment with transitions etc.
Save to my computer.

Second, open DVDFlick.
Add Titles
Add a menu if you wish
Under project settings set the burning options to burn to your DVD drive.
When you are done click on Create DVD

Okay now I have done this and it does work in my dvd player.
All software used is 100% full version and free.

I recommened you are prepared to fiddle and experiment. There are lots of options available. I have tried to get a good result using the easiest method.




Good luck. ...read more!