The Premade Method

As I mentioned in the beginning. MySQL actually has a premade method that allows you to select a random row by querying for it.

This method is great but if you are randomizing from a large table this method is not very efficient and with a high volume of queries it really puts a strain on your DB.

The New Method – Randomizing 1 Entry

Now here's the new solution by selecting a random row with the offset. This method will query exactly to the random entry; thus, making this process much faster.

Now you can modify the $query line to include your filters and sorting stuff, whatever you need.

The New Method – Randomizing More than 1 Entry

The above method right now can only select a single row. What if you want to randomized more than one item. Here's a method to select multiple items without overlap.

To be honest you can use the multiple randomizer and just set the random amount to 1 but the other method saves you like 20 lines of code. Imagine how much faster that could be!

Automating It

What you need? The first thing you need to know how to do it set cronjobs. If you don't know how to do that you can learn how to set cronjobs here. The cronjob is what will automate your server to run the script and how often to run it.

The Files

All you'll need is two files to make this work. The first file, mysqldump.php can be grabbed from CreativeFactory.it. The next thing you need is my backup.php file. Just create a file called backup.php and dump the following script inside.

The Setup

Configure the first file variables of the script and then just leave the rest. Put the backup.php and mysqldump.php in the same folder where you want the back up files to be dumped. Set the cronjob to run backup.php you don't need to worry about mysqldump.php. That's it, it'll automatically backup.

Possible Problems

The problems that you may experience is the MySQL privileges. If your account doesn't have enough privilege then you may not be able to properly query the database. Another problem maybe the CHMOD of the folder you're backing up to. You need to have write access into that folder.

Recovering from Backup

To recover you database just log into your phpMyAdmin, open the database you want to recover. Select the import tab and just browse for the file. If I recall the file itself should overwrite tables that are already in place if not then you may have to drop all the tables first.

If you didn't see the link above here it is again:
JerryLow.com

Click for this full cartoon…

See what I'm mumbling on about right here:
Demonstration of Marquee Tool

Once again I'd like to clarify that I did not make the Rectangular Marquee Tool, it was written by Sergey Koksharov using certain functions of the Prototype/Scriptaculous framework. I'm merely just doing some tweaks to make it work better in my circumstance. So all credits goes to Sergey and the Scriptaculous team.

My modification will allow you to do certain things such as:

• Define a input image dynamically
• Define the output image dynamically
• Generate a final output image

I believe the PHP included in the original script was a bit dated so it wasn't working on my machine and servers that's why I made my own version.

So to start off you need to download the required files from: here. Then you need to extract the files into a scripts folder or whichever you prefer just remember to rename the source path after. The real files you need are:

• marker.css
• prototype_reduced.js
• rectmarquee.js

Once you've got the files extract them to the proper folders and create fresh PHP file to work with. This is the file your script will run from. I'll break down my code into chunks for you to understand, but I'll go in order so if you copy each chunk and paste them in the same order it should work. That is if you're reading this instruction right ;)

Before the HTML

So this piece of code starts off your whole document even before the HTML code. There's only two codes you need to modify which is the $img_src (original file) and $img_dst (final thumbnail file).

The HTML and HEAD Tags

This is the code to begin your HTML tag and your chunk of HEAD tag. Note that if you didn't place your files in the same location you have to change the source path.

Your BODY and Closing HTML Tag

So all that's left is the BODY tag. There's really no modification you need to do here except for the (don't paste this in your code in order):

This line defines where the crop box starts and how big it should be. You can play around with it if you want. Anyways here's the coding (do paste this in).

Now we're just about complete here. All this tool does right now is let you select an area to crop. To actually make the thumbnail you need the assistant of PHP (you can do it in JS but I prefer PHP). You need to have the GD library enabled in order for this to work.

At this point you need to create your last file which is named crop.php. All you need in crop.php is this:

That's it, and everything should work like planed. I've tested this script out a few times but if anything doesn't work just let me know.

Basically we're checking against a few things here and we give a rating to each criteria and then add up the final score to see where they rank. Here is what we'll be checking against:

• Length – 10 Points
• Lower Case Characters – 20 Points
• Upper Case Characters – 20 Points
• Numbers – 20 Points
• Special Characters – 30 Points

The points are given based on how much value they may add to the password. Enough talking I present you the function:

The script itself has a built in display bar which will visuallize how strong or weak the password maybe which could turn off. Here's an example of calling the script:

The Design Aspect

I always tell myself and people who design for me to not worry about the design. I can always code it and optimize it for the web. Although this maybe true I don't always design with that mentality. I usually keep the user of the website in mind. I never try to overkill the design just because I want to, but this is coming from a developer's thoughts.

Regardless, if you are one who is highly concerned about the graphical load time then design with that in mind. You can cut down on size by using design elements that you know can be replaced by CSS 2.0 standard coding. So we're talking about solid boxes, solid lines and etc. We'll go further into that in the CSS section. Using heavy graphics and lots of blending will add up in size. Something like that looks like Crankberry will cost you around 700 KB in image size with the whole page loading around 1 MB. I cater to designers and developers so fairly average for today's standard.

With that, keep those thoughts in mind when designing because if you design first then noticed that the site bogs down then you'll be going back many steps just to make revisions to that.

Keeping the Balance

As mentioned in the beginning of the article that there are many things that dampens the load time of your site. The way your content is drawn onto the pages is also a factor that may affect the speed. Static contents won't pull you down much unless you're uploading novels and encylclopedias on one page but then you have other problems to worry about don't you. Anyways, if your website pulls a lot of content from your database per page with lots of joins and queries then your content is also factored in. In these scenarios I usually recommend keeping a balance to mitigate high load times. So if you have a lot of heavy database interaction I would recommend keeping the design and graphics to a lower end. On the contrary if you don't have a lot of database interaction I may not recommend super heavy design just means that you're more flexible. Refer back to the last section as to how to optimize your design.

JPEG vs GIF vs PNG

Now that you're done your designing its time to slice the images up and start structuring your HTML and CSS. When saving your image files you have so many options as to which file format to save it as. You've got JPEG, GIF, PNG, Bitmap, TIFF and the list goes on and on. Just to shorten your list down, I would stick to three primary formats: JPEG, GIF, and PNG. All the other formats for development wise can be forgotten. Now some people like to consistenty use one format throughout their whole website but I like to switch it up. I prefer to use JPEG, GIF and sometimes PNG. I'll go into further details about which I use and when I use it in a bit. First of all you should understand the difference between all these formats. There has been many articles written over this topic so it would be super redundant to do it again. I'll spare you the theatrics and give you the highlights.

JPEG

• Lossly compression
• Compresses colors and grayscale
• Used for complex images

GIF

• Lossless compression
• 256 Colors
• Good for line and simple drawings
• Supports animation
• Supports transparency

PNG

• Lossless compression
• Patent-free GIF
• Supports transparency with opacity setting

Which to Use

After reading the above part you maybe wondering how this infomation reflects on your files format and which one you should use. Here's how you look at it. Lean towards GIF and JPEG and if necessary then use PNG.

Lets start with why minimal use of PNG. PNG is a nice format format in replacement of GIF. When saving the same simple GIF file in PNG you can end up with a smaller file size as PNG does a better job in compression. The reason I still don't use PNG much is because some of the older, non-main stream and mobile browsers don't have a good support for PNGs. There are ways to go abouts for this but to accomodate for all browsers would be very timely. As I always focus to present a cross-browser compatible website I stay away from this format.

Now then, we're left with the JPEG and the GIF. It is very simple when it comes down to these two contenders. If the image you're saving has lots of colors and blending then go for the JPEG if it has simple lines and text and solid color go for the GIF. Your sizes will optimized this way.

Here I took a screenshot of my currently portfolio (top design) which should most of the images should be saved in JPEG due to the complexity of the images and colors. The second screenshot is of FusedEffects which should mostly be saved in GIF due to the simple lines and large blobs of solid colors.

Good Practice

Obviously if you've got all that down you can quickly decide which format to use and how much compression you may want to do. If you're lazy like myself and you have Photoshop the best thing to do is to use their [Save as for Web] setting. The window it popups up with will give you the image size before you even save it.

This way you can switch between JPEG, GIF, PNG and different settings until you get the quality and size that pleases you.

The Role of CSS

Ok ok ok, I mentioned a few times (at least I think) that you can replace certain elements with CSS to eliminate the use of graphics where necessary. I always prefer this method when possible as I tend to think a few lines of code is always smaller than an image size.

Now a days, developers have come up with many creative ways to achieve graphical effects with just a few lines of coding. Such as rounded corners. The trend right now seems to be using rounded corner boxes instead of plain old square. Since CSS 2.0 has no support for rounded corners on div tags people rely on images and positioning. As I have released months ago a script that is purely css, cross-browser compatible and image-less for rounded corners.

That's only one of the many examples in which graphical elements can be replaced by CSS coding. I will be doing a full article on this in the near future so stay tuned for that.

If You Can't Replace The Image, Work With It

In certain cases some pure CSS solutions aren't as stable yet such as gradient effects you can combine images with CSS to create the effect. So for a full stretch gradient instead of making an image 5000px x 10px just save it as 1px x 10px and use the background: repeat-x; This will save you lots.

In summary, how much can you save by going through so much optimization. This really depends on how heavily you designed your site. As you can tell by my style I like to go heavy with personal designs and light on business designs. Sometimes its not up to you. I work with a designer who over does gradients and shadows everywhere so its up to me to optimized the images. Sometimes I can save up to 500+ KB by doing the right optimization. You maybe thinking that with the advancement of cable internet and the cost of bandwidth going down it doesn't really matter. Remember its all about the user experience. There are lots of factors involved that contibutes to your site's load time, try to optimized everything so there's is minimal lag time. You should also understand that with the advancement of technology more and more people are surfing with their mobile phones or laptops tethered through their mobile phones. Its always a plus for your users when they get the things they're looking for, faster.

Well, the Google Wave has been out for a couple months now and I'm still not sure what's so crazy about this thing. Either way, I've got some invites sitting here, if you're interested in joining the crazy crowd and seeing what this new Google product is all about just leave me a line. Try it out and then let me know how it has worked or not worked for you!

My Take on Google Wave

Google Wave isn't all that I had anticipated, or maybe I was expecting a lot. When it was first introduced it showed people communicating and working on projects together. It was like a shared community online to… work on things. So far I have not used it for such. I'm not going to go in details and put out a review as everybody probably sees a different use for this application. Let me know, how has Google Wave changed your life?

I believe Google Wave is one of those web application made to compliment with the Chrome OS that Google will be releasing. The Wave will play a key role in the work and communication aspect for the OS, just like how all their online applications are.

Get a Google Wave Invite

Once again, get an invite – leave a line or message.

Step 1

Using the select tool create a circle for where you want the coffee cup to begin.

Step 2

Gradient it in with a colour of your choice in which you want the colour of the cup to be. Use a darker colour near the center going to a lighter colour.

Step 3

Create a new layer named [inner cup]. Select a smaller area in the mug to the lower right part of the circle you just created and gradient this one in a darker colour. This in 3D aspect is the bottom part of the mug. We're going to set this in so we have an area to work with.

Step 4

Duplicate the smaller circle you just created by pressing Ctrl+J. Now select the bottom layer of the two and transform the object (Ctrl+T). Right click and select Distort. Drag out the shape to make something like so:

Step 5

Press Enter to confirm the change of shape. Change the layer blending mode to multiple.

Step 6

Enhance the lighting by dodging and burning the following areas, go in circular motion like the shape of the cup. Blue arrows mean dodge and red arrows mean burn.

Step 7

Create a layer underneath [inner cup]. Select a circle area just smaller than your overall cup size. Fill it in with white, now offset the selection to the left 3 or 4px and crop out the remainder.

Step 8

Using the eraser soften up the middle part of the white curve line you just created and the tips of the line as well.

Step 9

Create another layer on top and make another circular selection about 30 – 40 px away from the edge of your cup. Fill this in with a very dark brown gradient. Contract the selection 5px and crop out the center of it.

Step 10

Using the eraser soften up the two sides of the rim line you just created.

Step 11

Moving back to the [inner cup]. Using the burn tool burn out the top left of the [inner cup] until it looks like the one below. Don't worry about being bold and making it too dark, once the coffee is one top it'll look good.

Step 12

Create a layer on top of [inner cup]. Make a circular selection slightly bigger than [inner cup] but offset the selection more to the left and up more. Gradient fill this with a dark brown and dark orange. Change the opacity of the coffee layer to 70%.

Step 13

Create a new layer on top of the coffee layer with the same selection size as the coffee, fill in the section with a soft color close to white (but not gray). Deselect your selection (Ctrl+D) and Gaussian blur it for 5px (Filter > Blur > Gaussian Blur).

Step 14

At this point I noticed the cup wasn't very vivid in lighting and shadow so I dodged and burned a bit more of the edges and inner side as the arrows has shown. I also added a white mark in the coffee and blurred it as a reflection.

Step 15

On the edge I made a reflection mark on the cup. Basically drew a shape of the reflection I wanted, filled it in in white. Crop out the unwanted area and changed the opacity to 30%.

Step 16

Now we draw the ear of the cup. Create a layer under everything you just drew. Draw out the shape like the one shown below with the pen tool and select the path. Gradient fill it with the light side to the outer part of the ear and darker towards the cup.

Step 17

Create another layer under the ear as the bottom/end part of it. Finish off the shape as shown below and fill it in with a much darker colour of the cup.

Step 18

Give some waves to the coffee by giving a couple of dodge and burn strokes as follows.

Step 19

Create another layer below everything, this will be your shadow layer. Just draw out any random shape that looks like your cup and fill it in with a dark gray. The shape doesn't need to be that accurate as it will be blurred.

Step 20

Blur (Filter > Blur > Gaussian Blur) at 20px and change the layer blending option to multiply.

Tweak around with the lighting and contrast and you'll get something that looks like this:

Website Name

When I was a younger starting a website or a project was easy. Just come up with a name that I liked and then just purchase the relevant domain after. Today, its not the case, we name websites and projects based on domain availabilities and possibly price. Just to give you a scope there are 112,961,783 active domains currently, with 83,320,335 of that being a .com domain (1). Although the combination of words for domain is near endless, it'll be harder and harder to get the name you want.

It will eventually boils down to resorting to a longer domain name, unique play on words or purchasing pre-owned domains at a premium pricing.

The Design

Once you're ready to start designing your website you'll have to put into perspective how big or small to design it. Just because you have a 14" or a 36" monitor doesn't mean that everybody does as well. As of January 2009 57% of detectable users are displaying at higher than 1024×768 px. There are 36% users at 1024×768 and 4% less than that (2).

Understanding your target users is very important. If you cater to teenagers than a higher percentage of your user will end up in the 1024×768+ category. If you cater to an older or well aged audience then you'll probably have more users in the 1024×768 or below category. If you cater to graphic artists and designers then you most like have a much higher resolution to work with.

I tend to use a 1400×1100 canvas for my design and keep content within a 1200×1100 or 1000×1100 box, the remaining area is for the design of the background. Just like shown below:

Color Wise

You shouldn't have to worry too much about colors as 95% of users has 24bit or 32 bit hardware supporting up to 16,777,216 colors.

Developing

The biggest concern that you should have is how the users view your website once its made into HTML. The most recent stats indicate that 47.5% users online are using Firefox and a collective percentage of 37.5% of users are using IE6, 7 and 8 (3). As you can see a significantly outstanding of majorities use Firefox and IE.

When developing offline I like to test and view my scripts in Firefox and IE7. Once done, I like to view it in IE 6 and tweak things. This step should be the biggest tweaking stage. If everything works in Firefox and IE 6 and 7 the probability (and this is not a probability of 1) of it working on other browsers is pretty good.

When I have time I also like to test the page on different machines and different mobile devices to get a glimpse of how its working out.

The Money

With that, lets get to where some of you are truly interested in – the money. Is there money to be made making websites? Yes, but the competition as said before is high. With 112,961,783 active domains and 50 million blogs (detected in 2006) there arena is just too crowded (4). Ask yourself what you want to do and how that can be done in a unique way.

Who to Target

Defining your target market is a key to a good business and marketing plan. Which demographic do you want to be your key audience? Currently 72% of advertisers find it beneficial to target the 35-44 and 25-34 year old category with them making up 29% and 28% of users online, respectively (5). Don't let age be the only determining factor for you though, targeting a common interest amongst a group of users could be a break-through factor as well. This may be people who loves sour candies, office interiors or just residing in the same local area. A combination of criteria may make it more unique for you as well such as people aged 16-24 who likes sour candies or people of aged 35-44 living in the same city.

By detailing and being more specific about your target market may give you a bit of a competitive edge but understand that by adding more criteria to the list you are shrinking the size of your target. Ask yourself, if you have a smaller market to serve can you still sustain? If you sell a product that's $1 and you target 25-34 y/o male residents a suburban area you may not have enough potential clients to survive. Do some math and see where you want to end up, that should give you a scope of how many people you may potential need to target.

Making Money Through Advertisement

Some of you webmasters are planning to make money through advertisement, this maybe through a 3rd party company such as Google Adsense or Adbrite or just handle advertisement internally. You should know that there's still plenty of advertising dollars floating around the internet for you to make, it all just depends if you know how to get it.

Focusing on North American market here, despite the depression and economic downturn organizations are keeping a budget ready for internet advertisement. There's many factors why this is, which is slightly irrelevant here but keep in mind that this dollar amount will continue to grow proportionate to the growth of how many and how often people access the internet on a daily base.

The outlook for 2009 was an 8.9% growth in overall internet advertisement spending which equates to $25.7 billion US dollars. This is a good enough motivation for those who wishes to make a career out of websites and advertisements (6).

I am just so tire right now so I suppose I'll edit and update this article as I go.

1. http://www.domaintools.com/internet-statistics/
2. http://www.w3schools.com/browsers/browsers_display.asp
3. http://www.w3schools.com/browsers/browsers_stats.asp
4. http://www.cyberjournalist.net/news/003674.php
5. http://www.eiaa.net/ftp/casestudiesppt/EIAA_Marketers_Internet_Ad_Barometer_2009_PR_Presentation.pdf
6. http://www.emarketer.com/Article.aspx?R=1006813