If you have a blog or a website with a lot of content sometimes the images can take a toll on the load time of the pages. There are a number of steps you can take to speed things up. If you analyze the loading of your website you might notice that the images take up a huge part of the load time. Let’s take a look at how you can compress your .png images to improve on this figure.

We’ll use the tool pngcrush for this purpose. pngcrush is a free and open source command line tool that, as the name suggests, compresses PNG images. Take a look at the projects website for detailed information on how to use it. We will cover the basics in this article.

Installation

Most modern distributions of Linux such as Fedora and Ubuntu have pngcrush available directly in their default repositories. So, to install it on you Ubuntu computer execute the following command:

# sudo apt-get install pngcrush

On Fedora do the following:

# yum install pngcrush

Usage

pngcrush optimizes a PNG graphics file by reducing the size of the files IDAT chunk. The process is not simple. The great thing about pngcrush is that the authors of the tool have simplified things for you. They ship it with a great option – brute. When you use this option you effectively tell pngcrush to try and use the most suitable method to compress the image at hand. There are about 114 different filters that can be used, so this option is mighty useful. Here’s how you would use it to compress an image:

# pngcrush -brute -e “.compressed.png” image01.png

The two options used here are -brute which I just explained, and -e. The second option tells pngcrush what extension to add the the filenames. So after the process of crushing is complete the compressed version of the file image01.png will be called image01.compressed.png. you can change the extension if you like.

You can also slightly modify the above command to compress several PNG files in a directory. Execute the following command:

# pngcrush -brute -d “/var/www/html/website/images/” *.png

The above command uses a new option, -d. This option tells pngcrush where to place the compressed image files after the compression is complete. The above command will compress all the PNG file in the current directory and place them in /var/www/html/website/images/.

I strongly suggest that you read up more about this tool and its options on the projects website. There are a lot of options that might help you speed up the process of compression or do a better job of it. Put the new images into your website and watch your pages load faster.

---
Related Articles at Simple Help:

How to create and extract zip, tar, tar.gz and tar.bz2 files in Linux
How to encrypt your Linux backups
How to test your Internet connection speed
Cable Modem Troubleshooting: High Speed Surfing HS200
Cable Modem Troubleshooting: High Speed Surfing SM100

This tutorial will guide you through creating a font directly from your own hand writing.

Using the YourFonts.com service, you can create your own TrueType font in a matter of minutes.

The steps are painfully easy. All you’ll need to do is download their .pdf template and print it, fill in the letters/symbols, then scan and upload it. You’ll be able to preview your font and make any adjustments before purchasing it. They charge a reasonable $7.50 to create the font for you, and it’s available to download immediately after purchase (plus it’s emailed to you). I’ve compared the YourFonts.com service to a number of other similar “font generators” and it’s both easier to use, and less expensive.

The template you use to create your font includes all of the letters of the alphabet, numbers, symbols and even your signature.

click to enlarge

Using your custom font is great for images for your website, creating a signature for your emails, or even to use as the font for your IM conversations (though you’d be the one seeing it, unless both you and your chat buddy had the font installed).

If you need help installing your newly created font, you can use this tutorial on how to install fonts in Windows Vista or XP or this tutorial on how to install fonts in OS X.

---
Related Articles at Simple Help:

How to create a custom iPhone and iPod touch icon for your web site
How to create a custom Control Panel for Windows Vista
How to set custom shortcuts in the Windows XP "Save As" dialog box
The Ultimate Firefox for OS X
How to add custom folders to the Microsoft Office 2007 Save As dialog box

If you have ever handled the migration of a web service or a website from one server to another you know how crazy the experience can be. However, if you break the process up into clear steps and run constant checks you can make the experience a little easier on yourself. One of the problems that you might run into towards the end of the migration is the period when you have the website running well on the new location but need to wait for the domain name to be forwarded to the new server. you can either shut down your service till the domain is done forwarding, or you can setup your first server to forward all its traffic to the new server. Let’s take a look at how you can do that on a Linux machine using IPTables.

In case you didn’t already know, IPtables is a software firewall that ships with most distributions of Linux. It is an extremely useful software and can be used for a lot more than just as a firewall. In this exercise we will configure IPTables on a Linux server to redirect all the traffic coming on port 80, (which is the default web server port), to a server with the IP 122.164.34.240. The first step is to set your Linux box to allow this kind of forwarding to take place. Open a terminal window, log in as root user and run the following command:

# echo 1 >/proc/sys/net/ipv4/ip_forward

The next step is to tell IPTables to redirect the traffic to the new server:

# iptables -t nat -D PREROUTING -p tcp –dport 80 -j DNAT –to-destination 122.164.34.240

Here’s where the IPTables magic happens. With the third and final step we tell IPTables to rewrite the origin of connections to the new server’s port 80 to appear to come from the old server.

# iptables -t nat -D POSTROUTING -p tcp -d 122.164.34.240 –dport 80 -j MASQUERADE

The final step is required because if we don’t tell the web server of the new server that the connections are coming from the client machines, it would think that they are originating from the old server.

---
Related Articles at Simple Help:

How to set the date on your Linux machine
How to monitor your Linux machine with netstat
How to see a detailed history of the commands run in Linux
Walkthrough: Time Machine for OS X 10.5 Leopard
More on BlogRush

If you have one single IP address for your server and want to be able to host multiple websites you have a couple of options. You can either setup each website with sub-domains or you can setup virtual hosts using Apache and serve multiple domains from the same machine and a single web server. Most hosting companies that offer shared web hosting use virtual hosts for this. Virtual hosts are also quite useful when setting up a local web development environment on your computer. I’ll show you how to setup virtual hosts using Apache on an Ubuntu Linux machine.

In this example we will setup two virtual hosts on your local machine – calvin.dev and hobbes.dev. Both of these will point to different location in your filesystem and host different sites. Let’s begin by installing Apache and its support packages. From the command line, issue the following command:

# sudo apt-get install apache2-utils apache2-common

You might already have these packages installed. If you do, when you run the above command you’ll be told as much. Next, check to make sure that Apache is working fine. To do this launch a web browser on your machine and go to the url http://localhost. You should see a simple page informing you that you are running the Apache web server. If not, please check on the web for help on installing Apache.

There are a number of steps involved in this process. Here’s a breakdown of what we’re about to do. First, we’ll configure Apache with the two new virtual hosts that we want to setup. Then we’ll create the root directories for both of these new virtual hosts. After this we’ll add an entry into the system’s /etc/hosts file to point to the domains of these virtual hosts. Finally, we’ll create a simple file in each of these virtual host’s root directory to identify which domain it is associated with. Then we test.

With the web server installed and working we now move onto the configuration of the web server. Create a new file /etc/apache2/sites-available/vhosts.conf in your favorite text editor. Add the following text:

<VirtualHost *:80>
ServerName calvin.dev
ServerAlias www.calvin.dev
DocumentRoot /var/www/calvin.dev
</VirtualHost>

<VirtualHost *:80>
ServerName hobbes.dev
ServerAlias www.hobbes.dev
DocumentRoot /var/www/hobbes.dev
</VirtualHost>

Save the file. Now create the two directories mentioned in the config:

# sudo mkdir /var/www/calvin.dev
# sudo mkdir /var/www/hobbes.dev

Add the two domains to your hosts file. Open the file /etc/hosts in a text editor and add the following line at the end:

127.0.0.1 calvin.dev
127.0.0.1 hobbes.dev

Now activate the vhosts.conf config in Apache.

# sudo cd /etc/apache2/sites-enabled/
# ln -s ../sites-available/vhosts.conf

We’re almost done now. We just have to restart Apache:

# sudo /etc/init.d/apache2 restart

And add a couple of test files:

# echo “Hi I’m Calvin” > /var/www/calvin.dev/index.html
# echo “Hi I’m Hobbes” > /var/www/hobbes.dev/index.html

Now keep your fingers crossed. It’s time to make the magic work. Launch your web browser and go to the url http://calvin.dev. It should say “Hi I’m Calvin”. And then http://hobbes.dev. This should say “Hi I’m Hobbes”.

You should now have a working set of virtual hosts. You can add as many of these as you like. If you would like to run this on a remote machine you can replace the “*:80″ in the vhosts.conf file with the IP address of the machine, such as “10.2.10.6:80″

---
Related Articles at Simple Help:

How to use the OR operator in grep
How to easily install Apache, MySQL and PHP in OS X
An introduction to the sudo command and configuration file
Getting started with iptables in Linux
How to install applications on your N95 from a local web server

You’ve taken a bunch of pictures with your digital camera and you want to post them on the web. Of course, you don’t want other people stealing your work so you decide to add a watermark to your images. In this tutorial I will show you how to add a watermark to an image using GIMP, and open source image editing package.

The screenshots in this tutorial show GIMP running on Ubuntu Linux, however the steps are exactly the same if you’re running GIMP on Windows. Windows users can download the Windows version for free here.

Here are the before and after images:

Before

After

1. First, open your image in GIMP.


click to enlarge

2. Now click on the Text Tool. It’s the button with the letter A.


click to enlarge

3. Click on the little arrow to the top right of the foreground/background colours tool to make white the foreground colour. I also chose to increase the font size to 22px.


click to enlarge

4. Now click within your image, somewhere near where you want your text to end up and you are presented with the GIMP Text Editor.


click to enlarge

5. Type the text you want to appear as your watermark.


click to enlarge

6. Click Close.


click to enlarge

7. I wasn’t happy with the positioning of the text so I clicked the Move Tool. It’s the button that looks like a plus sign (+) with arrows on the ends.


click to enlarge

8. Use the mouse to grab your text and drag it to the desired location. You must click directly on one of the letters, not the background behind the text.


click to enlarge

9. Now open the Layers Dialogue. Click File -> Dialogues -> Layers.


click to enlarge

10. You will notice that your image now has two layers. The top layer contains the text you just entered.


click to enlarge

11. Make sure your text layer is highlighted, then move the Opacity slider to the left as far as you need to in order to achieve the desired opacity of your text.


click to enlarge

12. Click File -> Save As.


click to enlarge

13. Give your newly edited image a different name than your original image and click Save.


click to enlarge

14. GIMP will now prompt you to export your image before saving it as a JPEG. Click Export.


click to enlarge

15. Now you choose the quality of your new image. I chose the default of 85 and clicked Save.


click to enlarge

16. Now you have a watermarked image that you can post on the web.

---
Related Articles at Simple Help:

My GIMP resources
How to resize images using The Gimp
How to remove red-eye from your digital photos using GIMP
How to use The Gimp in OS X 10.5 Leopard
5 Desktop Wallpapers that will increase your productivity

This brief tutorial will guide you through creating your first web page.

What is HTML, and What Do I Need?

In order to create an HTML document you have to understand that HTML is the language of the Net. It’s a simple yet universal mark-up language that gives web developers and designers the ability to create complex pages of text that turn into images, styles, and valuable content that can be viewed by any one person using any sort of computer or browser on the web.

Some of you may have heard that you need some sort of special software in order to publish your own HTML page, however that is a blatantly false statement.

Here’s a small list of all the tools you need:

-A word processor (such as SimpleText, BBEdit, Notepad, or Microsoft Word)

-A simple working knowledge of HTML. (Fortunately HTML is easy and fun to learn!)

Yup! Thats it! These are all the tools you need as of now, told you it was small list.

Tags

Hyper Text Mark-up-Language mostly consists of several tags that are embedded into a simple text document. They are really just hidden behind the scenes, controlling most of what it lets you view, and what it wants you to view at the designated time. Hm, kind of reminds me of the parental control feature on the tv a bit.

HTML tags heavily take into account the existance of the English language. As most of the tags are words (such as blockquote) or abbreviations (such as “p” for paragraph), but they’re uniquely separated from the regular text since they’re placed in small angle brackets (such as these < >). Therefore the bold tag would look like <b>, and the blockquote tag is <blockquote>.

There are certain tags that will have the most influence on how the page will be formatted (for example; <p> begins a new paragraph, and <br> can break the last line within the paragraph to allow a space), and others differentiate how the words appear (<i> makes text italic). Most others provide information — such as the title — that doesn’t appear on the page itself.

One very important thing you must remember about tags is that for every one tag there is another one paired along with it. Every time you use a tag – say <br> – you must also add and close it off with another tag – in this case, </br>. Note the slash – / – before the tag “br”; that’s what keeps in contrast the closing tag from the opening tag.

A basic HTML page always begins with the tag <html> and ends with </html>. In between, the file has two sections – the header and the body.

The header enclosed by the <head> and </head> tags – contains information about your page that won’t be visible on the final page, for example the title. The body enclosed by <body> and </body> – is where the real HTML action takes place. Every thing that appears on the page is contained within these tags.

Now On To The HTML Document

I think we’re ready to start creating a simple page. Right?  Ok the first step, of course, is to create a new text document (remember, it should be saved as “Text Only” or “Plain Text” if you’re using a word processor that’s fancier than, say, SimpleText or NotePad) and name it “anything.html” where “anything” is, um, well basically anything at all.

Your basic document should look something like this:

<html>
 <head>
 <title>SimpleHelp.Net</title>
 </head>

 <body>
 <h1>HTML Basics</h1>

 <p>This is a simple article to help you create a working HTML page on SimpleHelp.Net!</p>

 <p>Simple helping on SimpleHelp.Net  </p>

 </body>
 </html>

Within the <head> tags, we have the title “SimpleHelp.Net” which will appear in the bar across the top of your browser.

Within the body tags, you should have everything that will be clearly visible on the page. With what we’ve written above it will look something like this:

HTML Basics

This is a simple article to help you create a working HTML page on SimpleHelp.Net.

Simple helping on SimpleHelp.Net

As you might have guessed, <h1> is the tag for a headline (the largest headline, in fact compared to <h2>, <h3>, and so on) and <p>, of course, marks the beginning of a new paragraph. Each paragraph is closed off by a corresponding </p> tag. As should every other tag be closed off by their correspondant tags that include a “/”.

Does “HTML-ing” seem pretty simple? Well guess what? It sure is!

Every page has a source code and this can with this you can view every web pages HTML code by accessing it through your browsers menu options. And best of all, you don’t need your own homepage to practice! You can save HTML documents on your local or portable drives and then have them open up using the Open option under the File menu within your browser.

I wish you all the best of luck as hopefully this has helped a couple novice readers create an HTML page and maybe even helped refresh a few of the more intermediate developers minds as well.

Feel free to comment!

---
Related Articles at Simple Help:

How to set the Properties of multiple MS Word documents
How to convert HTML pages to PDF in Ubuntu Linux
How to use the Content Library feature of Publisher 2007
How to create a symlink (shortcut) in Linux
How to extract the images from a .doc file using OpenOffice.org Writer

This guide provides some background info on Ajax, and then jumps right in and gets you started with examples.

JavaScript has been the main use for XMLHttpRequest objects for a good number of years now, but only recently did it start to gain some “fame”. A lot of the ruckus has to do with the many advanced web applications having web developers that see it, drool and want their own site to have those same exact advanced applications/features. But some of it also has to do with the group of people at AdaptivePath who have named this application Ajax

Ajax Beginners: What in the world is Ajax?

In a nutshell? Well Ajax is a solution to web interfaces.

Commonly, the web user enters some data or makes a simple choice, and clicks a button finalizing that choice or data entry and sends the data over to the server. The server hastily observes the data and sends back an entire new web page. Having to reload a page every time you want to do something is very annoying, disjunctive and extremely time-consuming for the user. XMLHttpRequest resurfaces the browser-server interaction to behind the scenes, so the user can just keep on playing with the same page, even while elements on the page are talking to the server!

With JavaScript we’ve always been able to server-side script without anything happening in the browser by using a few classic tricks up our sleeves.

Caching form data to a file with JavaScript on a server is good, but this usually doesn’t return any useful information to the JavaScript that calls it, so its effectiveness is very limited. Ajax, however, can get a full parcel of data back from the script it calls. Hence the “XML” part of the name – which really is just there for looks of sorts, kind of like the “Java” part of JavaScript, because the returned data can be plain text or whatever you like, if XML isn’t your preferred choice.

This alone opens up so many exciting possibilities. Every form submission, every JavaScript event, and whatever else application, can now interact with server-side databases and processing power! Data retrieval, password authentication, image generation – you just name it, Ajax can activate it.

Putting Ajax Into Practice

The only thing that limits Ajax-enhanced web application is your imagination and by browser support. Mozilla-based browsers can do it, Safari, and newer versions of Internet Explorer, and Opera 8 but not Opera 7. It’s best to slot in an alternative way of doing things for users who aren’t as witty as you’d hope for them to be. Also, Internet Explorer does things somewhat differently (most definitely) from all the other browsers, so it’s pretty essential to work the code to account for the irksome 80% of the population who rely on Explorer.

Now to the exciting part! Let’s generate a straightforward application that can accept input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser in use. We assimilate it in three parts.

First, we need an HTML form. As you’ can see below:

<html>
 <head>
 <title>Report</title>
 <script type='text/javascript' src='xhr.js'></script> </head> <body> <form action="fallbackpage.php" method="post">
 <p>Welcome, student. Please enter your essay here:<textarea name="essay" id="essay">
 </textarea> <input type="submit" name="submit" value="Submit" onClick="return
 grade(this.form.essay.value);">
 </p>
 </form>
 </body>
 </html

Note: For users without proper support for our script (named xhr.js), the form will just simply submit to the fallback page at fallbackpage.php. Ok, this is where the JavaScript comes in, we’ll take it slow.

function grade(essay) {

The first thing we have to do is initialize the object. There are two ways we must do this, for different browsers.

// Mozilla version
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    // IE version
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

We then escape the user input to make it URL-safe:

    essay=encodeURIComponent(essay);

and use the open method of the object to open a new connection to the PHP script:

    xhr.open("POST","grade.php");

The method requires two arguments: first, the HTTP method (GET or POST); second, the URL of the script. A quick HTTP header asserts the script for what it’s getting, and then the send method conveys the actual request:

 xhr.setRequestHeader(
      'Content-Type',
      'application/x-www-form-urlencoded; charset=UTF-8'); xhr.send(essay);

This last step isn’t necessary for GET requests, wherein all the data can be contained in the query string of the URL.

Obtaining Final Results

We’re finally ready to see if the HTTP request we made worked. The readyState property counts up from zero during the request, and shows 4 when the server page has been loaded successfully.

 xhr.onreadystatechange=function() {
      if (xhr.readyState==4) {

If indeed the actual request worked, then we can get the output of the server-side script by querying the responseText property, which contains a string. For more of a complex server script output, a responseXML property, which can hold a full document object of XML data, is an option also accessible.

     grade = xhr.responseText;
      alert ("Nice essay. Your grade is " + grade);
    }
    return false;
 }

In conclusion, the third component consist of PHP script, which basically lives on the server and waits patiently for the JavaScript to pass it some juicy data so it can thrive. This example uses some PHP, but any language you like — Ruby, Perl, C, ASP — can address your needs as well. The core of this example script is a natural-language function called grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space.

 <?php
 function grade_essay($essay) {
      return strlen($essay);
 }
 $essay = urldecode(implode(file('php://input')));
 $grade = grade_essay($essay);
 echo $grade;
 ?>

The php://input grabs the POST data, which gets put into a string, decoded and passed to the clever grading algorithm. The algorithm returns a numeric grade. Lastly, we just output the grade with echo - ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. If you need structured data, an XML document would be output with an echo statement in just the same way, but the content-type of the output page basically must be set to text/xml.

What the user sees is this: She/He types their essay into the text area in the browser, clicks Submit, and within instants an alert box pops up giving him/her a final grade on the essay. Invisibly, the essay has been sent to the server, read and evaluated by a team of PHP elves, and inevitably returned with a grade, without ever having to reload the page. The user can modify her essay and resubmit it continuously.

And that’s the general substance of the almost magical XMLHttpRequest object! The example is pretty simple and straight forward, but the uses of the object can be highly, multi clever.

For further inspiration and great examples of ingenious Ajax applications you can momentarily steer away from SimpleHelp.Net and visit iGoogle, Pageflakes, Netflix and Netvibes.

However, the data and functions that Ajax sends and acts out is simply up to you.

---
Related Articles at Simple Help:

30 Resources to Create Your Own Web 2.0 Site
Increase your Linux/Unix Productivity: How to use crontab
Some useful Linux bash tricks
How to avoid phishing scams
Overview: Skyfire – a new mobile web browser

Yes, I previously wrote a tutorial covering how to install Ubuntu 8.04 on your Eee PC. Since then, a new version of “Ubuntu Eee” has been released, 8.04.1. One my favorite new features is that Netbook Remix is now installed by default. So rather than have to install Ubuntu Eee and then Netbook Remix, you can just install this updated version and it’s all done at the same time.

Something worth mentioning before we get started – the name “Ubuntu Eee” has to change. The good folks over at Ubuntu sent a message to the fellow that creates and manages this version of Ubuntu, and asked him very politely to rename it. So if you have any thoughts, by all means head over to his blog and let them be known.

And now on to the installation.

1. Rather than write it all out again, I’m going to take the lazy route. Follow the first 11 steps of this tutorial, and then come back to this one. Just make sure to download 8.04.1 instead of 8.04.
2. When your Eee PC starts and Ubuntu loads, the Installer will automatically launch. Select your language and then click the Forward button.


click to enlarge

3. Now select the city/region that represents your time zone, and again click Forward.


click to enlarge

4. Pick the keyboard layout that you want to use, and click Forward.


click to enlarge

5. At this step you’ll have to decide how you want to have Ubuntu Eee installed. If you already have an operating system (like Windows, or another Linux) installed, you might want to keep it. As illustrated in the screenshot below, I already have Fedora installed on my Eee PC. If you want to keep the existing operating system and dual boot, so both it and Ubuntu Eee are available, use the slider to determine how much disk space you want to allocate to each OS. Then click Forward (and ignore the next step).


click to enlarge

6. If you want to wipe whatever operating system you currently have installed completely off your Eee PC, select Guided – use entire disk. If your Eee PC has more than one disk, you’ll need to select the one you want to install Ubuntu Eee on. Choose the first. You can use the second to store files etc. Important Note: this will wipe your first drive (or only, if you just have one) completely clean. If you have files on your drive that you don’t want to lose, or haven’t backed up, exit out of the installation now. Boot back into your existing operating system (remember to unplug the USB thumb drive or external CD/DVD drive that has Ubuntu Eee on it) and back up those files. Then start over. Otherwise, click Forward to continue.


click to enlarge

7. Enter all of the required information in each of the fields provided, then click Forward.


click to enlarge

8. You’ll be presented with a summary screen of all the selections you’ve made so far. Assuming everything is the way you want it, click Install.


click to enlarge

9. The first part of the actual installation will be to create and/or format a partition. It’s not exactly entertaining to watch, so you may want to grab yourself a beverage.



10. After the formatting has completed, Ubuntu Eee will install.



11. Once everything has completed, you’ll be prompted to reboot your Eee PC. Remember to unplug the USB thumb drive or external CD/DVD drive before your Eee PC starts again.


click to enlarge

12. After your Eee PC starts up, you’ll be set to start using Ubuntu Eee, with the Netbook Remix interface. Have fun!


click to enlarge

---
Related Articles at Simple Help:

How to add KDE to Ubuntu Eee 8.04.1
How to increase the screen resolutions available to Ubuntu while running in Parallels for OS X
How to automatically sign in to Ubuntu
How to move or copy photos from your digital camera to your PC in Ubuntu
How to install Ubuntu themes

The following addons and utilities will add a whole bunch of extra features to iWeb, allowing you to create even more robust web sites.

1. iTweak
2. Easy iWeb Publisher
3. iWebSites

iTweak

iTweak adds boasts that it is the “ultimate companion for iWeb”. I’m not sure about that, but it sure does add a lot of features. The highlights -

iTweak can back up both iWeb 06 and iWeb 08 sites in a snap

It can add a Favicon via a simple drag and drop method

You can integrate a Google Search bar into and for your site

You can add Google Analytics, Statcounter and any other hitcounter in the world

Add a powerful PHP contact form

Search & Replace the HTML that iWeb publishes

iTweak can password-protect your site

iTweak is donationware – so if you find it super-useful, donate some money to the author.

click to enlarge

Easy iWeb Publisher

Easy iWeb Publisher is very similar to the previously covered w2w utility. It allows you to upload your iWeb created site to a non-.Mac account. After configuring it to use your Web Hosting account details, you can just drag and drop folders onto the Dock icon and Easy iWeb Publisher takes care of the rest.

click to enlarge

iWebSites

iWebSites only has one feature, but it’s a really useful one. It allows you to create multiple websites that are completely independent of each other (it does this by manipulating the website files that iWeb creates).

---
Related Articles at Simple Help:

How to upload a website built with iWeb to a non .mac/MobileMe account
How to insert a Google Map into your website using iWeb
Take Control of your Right-Click Menu with FileMenu Tools
Update: Gmail increases storage to 4.2GB
Google Webmaster Tools Adds Subscriber Stats Feature

Though I’ve previously covered How to install WordPress in Windows Vista, that method used a BitNami stack, which comes with a few drawbacks. The method outlined in this tutorial will leave you with a perfect WordPress installation on your PC – which is great to use as a development and testing environment.

1. Before you install WordPress, make sure you have WAMP (Windows, Apache, MySQL & PHP) installed. Fortunately we have a tutorial that walks you through each step of installing and configuring WAMP. Once you’ve got that done, continue with step #2.
2. Click the WAMP icon in your System Tray and select www directory.



3. Explorer will open the folder C:\wamp\www\. This is where your HTML, PHP and other site files reside. You’ll notice an index.php file. This a WAMP file (the one that provides shortcuts to phpMyAdmin etc). You don’t want to delete it, but you also probably don’t want to leave it titled index.php.



4. Rename it to something else (for example, wamp.php).



5. Now download WordPress, and extract it into the C:\wamp\www\ folder



6. When you extract WordPress, it will create a folder called wordpress. If you’re using WAMP specifically for WordPress development, and you don’t want to have your blog show up at the address http://localhost/wamp (and would rather it display at http://localhost) – select all the files in the wordpress folder, cut and paste them into the C:\wamp\www\ folder.


click to enlarge

7. Now load the WAMP config screen in your browser by entering the address http://localhost/wamp.php – assuming you renamed the WAMP config file to wamp.php (in step #4).



8. In the Tools section, select phpmyadmin.



9. Log in to phpMyAdmin.



10. To create a new database for WordPress, select the Databases link.



11. In the Create new database section, enter wordpress as the database name (or something similarly descriptive) and click Create.



12. Make sure you get a confirmation that the database was successfully created.



13. Now enter http://localhost/ into your browser. You’ll be greeted with the WordPress “getting started” screen. Click the Create a Configuration File button.


click to enlarge

14. Review the info, and then click the Let’s Go! button.


click to enlarge

15. In the Database Name field, enter wordpress (or whatever database name you specified back in step #11). Enter root as the User Name (unless you’ve created another MySQL user) and your MySQL password in the Password field. Your Database Host should be set to localhost and the Table Prefix should remain wp_ (but can be changed if you wish). When you’re done, click Submit.


click to enlarge

16. Now click Run the install.


click to enlarge

17. A few seconds later you’ll be presented with the Information needed screen. Give your blog a title, and enter your email address in the provided fields. If you’re using this WordPress installation as a development site, uncheck the Allow my blog to appear in search engines like Google and Technorati. Click Install WordPress.


click to enlarge

18. Make note of your username (admin) and assigned password, then click the Log In button.


click to enlarge

19. Enter your Username and Password in the appropriate fields, and once again click Log In.


click to enlarge

20. That’s it! You can start writing posts, uploading/creating themes etc.


click to enlarge

---
Related Articles at Simple Help:

How to make your WordPress site much more usable for mobile browsers
9 easy ways to secure your WordPress blog
Paid gigs at Simple Help
How to install WordPress in Windows Vista
How to remove the DiggBar from sites visited via digg

This tutorial will walk you every single step of the way through installing and setting up WAMP (Windows, Apache, MySQL & PHP). With WAMP installed, you can run a web server (and things like WordPress, MediaWiki, and Jinzora) on your Windows PC.

Installing WAMP
Configure WAMP & MySQL
Install and setup Fake Sendmail

Installing WAMP

1. To get started, head over to the WAMP download page and save the .exe to your desktop. Once the download has completed, run the installation file. The first message you’ll see is a warning – if you have an older version of WAMP (1.x) installed, make sure to uninstall it first. Otherwise click Yes to continue.


click to enlarge

2. Click Next on the initial setup screen.


click to enlarge

3. Review the License Agreement, select I accept the agreement and then click the Next button.


click to enlarge

4. It’s a good idea to leave the default installation directory alone (C:\wamp\) – but if you want to change it, now’s the time. Click Next to continue.


click to enlarge

5. Decide if you want to have WAMP Quick Launch and/or Desktop icons, and click Next.


click to enlarge

6. Finally, click Install.


click to enlarge

7. The installation doesn’t take too long.


click to enlarge

8. Once it has completed, the setup phrase will begin. If you have Firefox set as your default browser, WAMP will ask you if that’s the browser you want to use. Click Yes.


click to enlarge

9. At this point, if you have a software Firewall installed, it will probably pop up and warn you that Apache wants to accept incoming connections. Depending on your specific Firewall the “button” to click may be different, but it will be something similar to Unblock. Do not click “Keep Blocking”.


click to enlarge

10. Leave the SMTP: server set as localhost (more on this later) but do change the email address to yours. Click Next.


click to enlarge

11. That’s it – you’re done! Make sure that there’s a check in the Launch WampServer 2 now box, and click Finish.


click to enlarge

Configure WAMP & MySQL

1. In your System Tray you should now see a “WAMP” icon. Click it, and select Put Online (Note: if it says Put Offline ignore this step and skip to the next one).



2. Open your browser (if it isn’t already) and enter the URL http://localhost.



3. The WAMP configuration page will load. From here you can access the tools phpMyAdmin, sqlitemanager etc.


click to enlarge

4. Now you’ll want to set a MySQL password, because by default, WAMP doesn’t set one. Select phpMyAdmin from the WAMP configuration page. At the bottom of the phpMyAdmin screen you’ll see a message about MySQL running without a root password.



5. To correct this, select the Privileges link. In the User overview section, place a check in the box next to Root – Localhost (see image below) and then click the Edit Privileges button.

   
   click to enlarge

6. Scroll down to the Change password section, and enter your password in both boxes. Click Go to save the change.


click to enlarge

7. Make sure you get a message saying The password for 'root'@'localhost' was changed successfully.



8. Minimize your browser window, and open up Windows Explorer (or whatever file manager you use in Windows). Navigate to the C:\wamp\apps\phpmyadminx.x.x\ folder. Inside that folder, open up config.inc.php – ideally in an HTML or PHP editor, but Notepad will do if you don’t have an html/php/code editor.


click to enlarge

9. Search for the line $cfg['blowfish_secret'] = ''; – if you’re using notepad it might be easier to just search for the word blowfish



10. Change the line $cfg['blowfish_secret'] = ''; to $cfg['blowfish_secret'] = 'mypassphrase'; – where mypassphrase is your own password – not the same one you specified for root in MySQL.

    

    Note: as you can see from the screenshots above and below, this is much easier to work with in an HTML/PHP editor than it is in Notepad.


click to enlarge

11. Now search for the phrase ['auth_type'] = 'config'; (again, if you’re using Notepad you might want to just search for auth_type).



12. Change config to cookie.



13. Almost done. Now search for $cfg['Servers'][$i]['password'] = ''; Replace the = ''; with = 'your-mysql-password'; – where your-mysql-password is the MySQL password you specified back in step #6 of this section.


click to enlarge

14. Save the changes you’ve made and exit out of your editor. Click on the WAMP icon in your System Tray and select Restart All Services.



15. Bring up your browser again, and refresh http://localhost. Select phpmyadmin again.



16. This time you’ll be prompted to login. Use root as the Username and enter the password you specified in step #6 as the password. Ignore the error about mcrytp not being loaded – we’ll fix that in a minute.



17. Return to the Privileges section, and this time place a check next to the user root with the host 127.0.0.1 (see screenshot below) and click the Edit Privileges button.


click to enlarge

18. Set the password to the same one you used for root previously (step #6) and click Go. Confirm the password was updated.



19. Now select the user root in the production.mysql.com host section, and once again click the Edit Privileges button.


click to enlarge

20. Again set the password to the same one you’ve previously used for root.



21. And make sure it updates successfully.


click to enlarge

22. Click the WAMP icon in your System Tray, choose PHP from the menu, then PHP extensions, scroll down to php_mcrypt and select it.



23. Refresh phpMyAdmin in your browser, and this time you’ll be prompted to login, but without the mcrypt error.


click to enlarge

24. You’ve now set a password for MySQL, making it considerably more secure.

Install and setup Fake Sendmail

1. If you’re running Windows XP, 2000 or NT and have an outgoing (SMTP) mail server already installed on your PC, and can be accessed by localhost, you can skip all the steps in this section – your’e done! If you’re using Vista (or don’t have a mail server installed) – keep reading.
2. Because a number of services you may use require a working mail server, we’ll set up Fake Sendmail and use your ISPs outgoing mail server. An example of a service that requires working mail is WordPress – if you forget your password and want to reset it, WordPress will email it to you. Without Fake Sendmail (or a local SMTP server) every time a service tries to send an email, it will fail.
3. Head over to http://glob.com.au/sendmail/ and download sendmail.zip. If your ISP requires that you use SSL, make sure to download sendmail-SSL.zip as well. Create the folder(s) C:\usr\lib\ and extract sendmail.zip (and sendmail-SSL.zip if you need it) into that folder.


click to enlarge

4. Open up sendmail.ini in Notepad. Scroll down to the smtp_server= section and change it to smtp_server=your.smtp.server, where your.smtp.server is your ISPs outgoing mail (SMTP) server. If you’re unsure of your outgoing mail server, you can try this list of ISP mail servers – if yours isn’t listed there, check w/ your ISP. In the smtp_port= section, make sure it’s set to 25 – assuming your ISP uses port 25 for SMTP (not all do – though mine does).


click to enlarge

5. In the default_domain= section, add your ISPs domain. For example, if you use Comcast as your ISP, add comcast.net. Because I have service from Telus, my default domain is telus.net (as seen in the screenshot below).


click to enlarge

6. If your SMTP server requires authentication, add your username to the end of the auth_username= field, and your password to the auth_password= field.

   Note: you can use the Gmail SMTP server (see this FAQ for details) – assuming you have a Gmail account. However, during testing I noticed a considerable delay in receiving mail – up to 7 hours. Using my ISPs mail server settings there was no delay at all.


click to enlarge

7. Save your changes to the file (sendmail.ini) and exit Notepad. Now click the WAMP icon in your System Tray, select PHP and then click php.ini.



8. Scroll down to the [ mail function ] section. Comment out each of the For Win 32 lines by adding a semicolon ( ; ) in front of each one (see screenshot below). Uncomment the line sendmail_path = by removing the semicolon ( ; ) in front of it. Add "/usr/lib/sendmail.exe -t" to the end of the line, so that it reads: sendmail_path = "/usr/lib/sendmail.exe -t" (again, see the screenshot below).


click to enlarge

9. Save php.ini and exit out of Notepad (or whatever editor you used to edit php.ini). Click on the WAMP icon in your System Tray and select Restart All Services.



10. Now any time one of your web services needs to send an email…



11. it will go through!



12. That’s it – you’re done! You now have a fully functional Apache, MySQL and PHP system on your PC.

---
Related Articles at Simple Help:

How to setup slow query logging in MySQL
How to easily install Apache, MySQL and PHP in OS X
How to remotely access your MySQL in a secure manner
Bash one liner – how to compress, move, and extract a directory
How to reset a lost MySQL root password

You won’t find any super-advanced addons for “extracting strings from xml and javascript files to simplify mozilla application localization process” or “debug running applets and Java Webstart application” in this list. These addons are intended for “the rest of us” – people who grudgingly have to edit our own web sites.

MeasureIt

MeasureIt allows you to quickly bring up an on-screen “ruler” to measure sections of your site. Quickly determine the space between certain sections, indents etc.

Quick Usage Instructions
1. Click the MeasureIt button in the bottom right corner of Firefox



2. Click and drag the area you want to measure.



lori

lori stands for “Life-of-request info”. What it does is tell you valuable info on how long it takes for your page to display, how large it is, and how many requests were made to load the page.

The first number displayed is the time it took to see the first byte returned from the server (from your click to the first byte received by your browser). It’s displayed in seconds (up to the thousandth of a second).

The second number is how long it took to display the page (from your click to the complete rendering of the page). Again, the time is displayed in seconds, up to the thousandth of a second.

The third number displayed is the total page size (number of bytes/kilobytes/megabytes used to display the page). This value includes both bytes fetched from the server and bytes fetched from the browsers cache.

The forth and final number is the total number of “requests” used to fetch the page content (images, style-sheet, javascript etc). Again, this value includes both data downloaded from the server and cache requests.



Source Viewer Tab

Source Viewer Tab is a simple but extremely helpful addon. When you select View Source (or View Selected Source it opens the source view in a new tab, instead of a new Firefox window. If that weren’t enough, it also allows you to specify a totally different application to view your source with (Notepad, TextEdit – whatever your HTML editor of choice is).


Source Viewer Tab settings


Source Viewer Tab displaying HTML source in a tab

IE View Lite

IE View Lite is fairly self explanatory. It allows you to view a page in IE. It has a couple of added benefits vs. similar addons. 1) It’s smaller and 2) It allows you specify Safari instead of IE if you’re using OS X.

Right-click a blank spot on any web page and select View This Page in IE to do just that.



To use Safari instead of IE (OS X only), change the Internet Explorer Location to /usr/bin/open and add -a Safari to the Parameters field.


IE View Lite set to use Safari

Firebug

Firebug is without question the most advanced addon in this list. Though it’s capable of doing a lot of “expert level” things, it’s also very handy for figuring out basic stuff. I’ve been using it a lot lately (new theme on Simple Help) to determine which part of the .css file is causing things to render the way they do. Webmonkey has a good tutorial on getting started with Firebug if the interface seems a bit daunting. For what it’s worth, Firebug has saved me hours of frustration over the last week alone.


click to enlarge

---
Related Articles at Simple Help:

How to add thumbnail previews of websites when you use Google search in Firefox
How to move your Sidebar to the right side of Firefox
How to force Firefox to open bookmarks in a new tab
How to add any search engine to the Firefox Search Bar
How to import your StumbleUpon favorites to your Firefox 3 Bookmarks

This brief tutorial will explain out how to create a custom icon to display on the iPhone and/or iPod touch springboard for your web site.

1. When a user adds a site to their springboard by using the Add to Home Screen feature, by default, the iPhone or iPod touch will use a thumbnail of the visible part of the page being displayed in Safari.


click to enlarge

2. If you’d like your site to have a much nicer icon appear on the springboard when people add it, create a 57px by 57px PNG icon, name it apple-touch-icon.png, and upload it to the root folder of your site. Note: Apple themselves actually use a 129×129px icon, so you may want to experiment to see what size looks best for yours (it will scale to the default iPhone/iPod touch springboard icon size).

   If you don’t have access to the root folder of your site, or you’d like to put the icon elsewhere, add the following line to the <head> of your site:

   <link rel="apple-touch-icon" href="/path/to/file.png" /> (and upload the file.png to that folder).

3. Now when someone adds your site, it will have a nice icon associated with it.


click to enlarge

4. Done!


click to enlarge

---
Related Articles at Simple Help:

How to reorder the icons on your iPhone or iPod Touch springboard
How to customize the music icons (buttons) on your iPhone or iPod Touch
How to accurately relocate the cursor in Notes for your iPhone or iPod Touch
Screenshot Tour: Crash Bandicoot Nitro Kart 3D for iPhone/iPod Touch
How to take screenshots of your iPhone or iPod Touch screen

Using MAMP, you can quickly and easily install Apache, PHP and MySQL on your Mac. Installing each package separately is totally possible, but MAMP offers a number of advantages vs. individual installations. MAMP will not alter or interfere with an existing version of Apache already running on your Mac. If Apache/MySQL/PHP are no longer needed, delete the MAMP folder and everything returns to its original status. Keep reading for a walk-through of the installation and initial setup.

1. First things first, download MAMP. Open the .DMG file, review the license, and click the Agree button.


click to enlarge

2. Now drag the MAMP folder to your Applications. Ignore the MAMP PRO folder (unless you want to purchase MAMP Pro – it does include some extra features, but it’s not free).


click to enlarge

3. Give MAMP a minute to install.



4. Navigate to your Applications, select the MAMP folder, and double-click MAMP.app.


click to enlarge

5. The MAMP interface will launch, and Apache and MySQL will start.


click to enlarge

6. Your browser will open and load the MAMP dashboard (http://localhost:8888/MAMP/?language=English). This page includes all of the info on the default settings for your MySQL server, and allows you to quickly access the included tools (phpinfo, phpMyAdmin and SQLiteManager)


click to enlarge

7. Select phpMyAdmin to configure your MySQL databases.


click to enlarge

8. Your web server “home” folder (document root) can be found in the htdocs sub-folder of MAMP.


click to enlarge

9. Place your .html, .php etc files in htdocs, and they’ll be viewable at http://localhost:8888



10. Return to the MAMP interface application, and click the Preferences… button. The first tab allows you to control how the servers are started/stopped, if the start page should load when MAMP is opened, and the location of that start page.



11. The Ports tab allows you to change the ports for Apache and MySQL.



12. The PHP tab allows you to specify which version of PHP you’d like to use, if Zend Optimizer is enabled/disabled, and which cache to use.



13. Finally, the Apache tab allows you to change the default Document Root.

---
Related Articles at Simple Help:

How to setup slow query logging in MySQL
Bash one liner – how to compress, move, and extract a directory
How to remotely access your MySQL in a secure manner
How to monitor MySQL in real-time with mytop
How to reset a lost MySQL root password

This brief will take you through the steps required to install WordPress – and all of its dependencies (Apache, PHP and MySQL) – in Windows Vista, using the fantastic open source software BitNami WordPress Stack.

A bit of background: BitNami Stacks are completely self-contained, and therefore do not interfere with any software already installed on your system. For example, you can upgrade your system’s MySQL or Apache without fear of breaking your BitNami WordPress Stack. If you have Apache already installed, the version that installs with BitNami won’t interfere with it.

Though this tutorial covers installing WordPress in Vista, BitNami WordPress Stacks are also available for Linux, Mac x86, Mac PPC, Solaris x86 and Solaris SPARC.

1. To get started, head over to the BitNami WordPress Stack page and download the “Full Stack” for Windows (about 39.1MB for WordPress 2.6). Run the installation file once the download has completed.

   Click Next to begin.


click to enlarge

2. Decide if you want to include PhpMyAdmin as a part of your installation (why not) and leave it checked if you do. Click Next to continue.


click to enlarge

3. To change the default installation location, click the folder button and navigate to the folder you want to install the BitNami WordPress Stack in. The default is fine. Again, click Next to continue.


click to enlarge

4. Enter the user name and password you want to use for WordPress. This user name will be the default administrative user – so opting for something like admin isn’t a bad idea. Then enter your real name and email address in their respective spaces. Yet again, click Next.


click to enlarge

5. Give your blog a name. Since I’ll be using mine as a development environment for Simple Help, I gave it the creative name of “Simple Help Dev Blog”. Your Hostname will be filled in for you. You’ll likely want to leave this alone. You guessed it – click Next.


click to enlarge

6. One last time – I promise – click Next.


click to enlarge

7. Now sit back and watch as the BitNami WordPress Stack installs itself. It can take a few minutes, depending on the speed of your computer etc. You might want to grab a cup of coffee, but don’t go too far.


click to enlarge

8. If you have Vista’s Firewall enabled, you’ll be prompted to Keep Blocking or Unblock mysqld. Click Unblock. If you have another Firewall installed, make sure to unblock mysqld.


click to enlarge

9. And a minute or two later, you’ll be prompted with the same message, but this time for Apache. Again, click Unblock. And the same holds true if you’re using another Firewall – make sure Apache is unblocked/allowed.


click to enlarge

10. Towards the end of the installation, it may appear as though BitNami has “stalled”. It hasn’t, just give it another minute or two….


click to enlarge

11. and it will finish. Leave Launch BitNami WordPress Stack checked, and click Finish.


click to enlarge

12. Your default browser will launch and open and load the BitNami Welcome screen. Click the Access BitNami WordPress Stack link.


click to enlarge

13. Your brand new WordPress blog will appear! Use the Login link in the bottom of the right-column to sign in to WordPress (or just add wp-admin/ to the end of the URL in the address bar).


click to enlarge

14. Sign in with the user name and password you created way back in step #4



15. After signing in, you’ll be at the WordPress Dashboard. From here you can write a new page, post, etc.


click to enlarge

16. Below you’ll find a screenshot of the first post in my new blog.


click to enlarge

17. If you opted to install PhpMyAdmin as a part of the BitNami WordPress Stack, you can access it by loading the page http://127.0.0.1/phpmyadmin. The default user name is administrator and the password is the same one you set for WordPress (in step #4). If you’re using your newly installed WordPress as a development environment, you can use PhpMyAdmin to import your existing WordPress database. If you’d rather use MySQL directly, the administrative login is root and the password is the same as your WordPress pass. The non-root account used to access the database is named bitnami, and its password is bitnami as well.


click to enlarge

18. Happy WordPress’ing!

---
Related Articles at Simple Help:

How to install WordPress on your Windows PC
How to make your WordPress site much more usable for mobile browsers
How to allow a program through the Windows Vista Firewall
Screenshot Simulation: Windows Vista TCP/IP Properties
How to easily tweak Windows Vista