bryankichler.com

Spring 2010 Andalusia Fire School

Bryan — Fri, 09 Jul 2010 04:26:06 +0000

Here are some images from my Fire School Classes in Andalusia. We had a great turnout, excellent weather, and a great group of guys and gals. Enjoy.

Quick Tip – How to Connect to MySQL using Perl

Bryan — Mon, 05 Jul 2010 04:17:52 +0000

This is a Quick Tip on how to connect to a MySQL database using Perl. Even though many other languages are sneaking their way onto Perl’s turf. There is still a great demand for Perl on the web, so don’t forget one of it’s primary uses. Here’s the code:

#!/usr/bin/perl
use DBI;

$database = “DATABASENAME”;
$hostname = “db.DOMAIN”;
$port = “3306?;
$username = “USERNAME”;
$password = ‘PASSWORD’;

$dsn = “DBI:mysql:database=$database;host=$hostname;port=$port”;

$dbh = DBI->connect($dsn, $username, $password) or die(”Could not connect!”);

$dbh->disconnect;

First we have to tell perl to use the DBI module. Define our variables. Then define the database information. Finally we’re able to connect to our database. This could be done in one line, but you’ll find that most people prefer to connect their scripts this way for clarity. That’s all. Thanks for reading

Quick Tip – How to connect to MySQL with PHP

Bryan — Mon, 05 Jul 2010 04:16:56 +0000

This is a Quick Tip on how to connect to MySQL with PHP. We have all done it from time to time, but sometimes we forget just how to connect to those pesky MySQL databases directly using PHP. So here’s how it’s done:
function open( ){$db = mysql_connect( ‘localhost’, ‘root’, ‘password’ );
} ?>

Here we have custom a function “open”. Followed by the mysql_connect function which we will supply the url, username, and password. It’s pretty simple to do in PHP. Thanks for reading

Setting up a Local Web Server with Apache Friends XAMP

Bryan — Mon, 05 Jul 2010 04:15:52 +0000

More times then not I have needed the use of a webserver to test various portions or web design that I’m working on for a client. In years past, this was not the easiest thing to do. You would first have to download your web server, and configure it for your system. Then you would have to track down, download, configure, and install various modules, extensions, and runtimes like Perl or PHP. In the end it was always a big hassle, and you were rarely able to install identical loads on two different machines.

Not anymore. Today there are a number of really good pre-configured web servers available that handle the job well. One of the most well known of these is Xampp. It consists of an Apache web server loaded with all the typical extensions. There are even several load package options available. If you want Tomcat, no problem. Don’t want PHP? They even have a bare version for a minimal install. No matter what your testing needs, more then likely Apache Friends has an answer, or they can help you find one. Now lets look at the install:

1. Go to the Apache Friends website and download the distribution of Xampp for your OS. If your not sure which one to get I would recommend getting the standard version with the installer. Save the file to an easy to find location on your hard drive.

2. Find the file on your hard drive, and start the install by double clicking it. The install works pretty much like any other installer. Just follow along as the main program is installed.

3. Once the install is complete you should see a dialog like the one below. If not you can go to the Apache Friends folder in the start menu and select “Xampp Control Panel”

4. Start Apache and MySQL. You will have to select if you want to run Xampp as a service or to start and stop it manually. If your only using Xampp as a test server, running it manually is your best option. If it runs as a service then it will be active all the time just burning up CPU cycles.

5. Open up your web browser and type in “localhost”. If you see the bright orange website of Xampp, your done.

That was easy. At this point your web server is up and ready for your website. I would go through and look at some of the examples, and set up the root password for MySQL. If you close the Xampp Control Panel dialog it will sit in the try for when you need it again. Apache Friends has a great site with even better documentation, so stop by there and read up if your still a little lost. Good luck.

HTML Redirect Tutorial

Bryan — Mon, 05 Jul 2010 04:13:39 +0000

Sometimes in the fast paced internet world your forced to relocate a website, change it’s name or rearrange a directory structure. Suddenly though your faced with a horrible problem. All those websites, directories, and search engines linking to your pages will find nothing but the dreaded 404 page, or even worse the page of a competitor. Well, there’s a simple measure that you can use to prevent just these issues. HTML redirects.

HTML redirects do exactly what the name implies. It’s a simple HTML page that once loaded, sends the user to a designated page after a certain period of time. Lets start with a basic HTML page for our example.

HTML Redirect Tutorial

This is your basic blank HTML 4.01 template with black text, white background, and blue links with the title “HTML Redirect Tutorial”. We want this page to be as simple as possible so that it loads quickly and accurately. So this bit of code is a great start. Now we need to add our redirect code. After the title tags, insert this line of code:

What this tells the browser to do is a refresh on the content in 5 seconds for the page http://www.whitesandsdigital.com. This is the heart of our redirect, and does all the work for us. When a visiter comes to this page he/she will wait for 5 seconds after the page loads, then be transfered to the White Sands website. You can change the amount of time to anything you want, but I wouldn’t reccomend anything more then 5 seconds.

Now we have a problem though. What if the visiter is using a browser that doesn’t support these kinds or redirects? The simple answer is that we’ll have to provide a simple html link for them. Lets put in a nice little formatted message in a table within the body tags.

Welcome to White Sands Digital.”

Click here if the page doesn’t load in 5 Seconds

Thats it. Now we have a mesage and text link in the middle of a standard redirect page for a website. Of course you can style this any way you like with an image or even flash or even Javascripts. It’s best thought to remember to keep the page as small as possible. Here’s the complete code:

HTML Redirect Tutorial

Welcome to White Sands Digital.”

Click here if the page doesn’t load in 5 Seconds

2010 PE Qualification in Birmingham

Bryan — Fri, 02 Jul 2010 18:31:33 +0000

Here are a few pictures from one of my PE Qualification classes in Birmingham. We usually have four every year in Birmingham with between 60-80 attendees. Mostly local contractors.

Beginner HTML Table Tutorial

Bryan — Fri, 02 Jul 2010 17:31:33 +0000

HTML tables are one of the basic HTML elements that have been around long before CSS came into the web scene. Some of us older webmasters still prefer some of the benefits of table designs over CSS even today, and even if CSS has taken over much of the web layout scene, most data will still be presented in tables for some time to come.

Tables are supported by just about every browser available today except, possibly, some small device browsers. These devices sometimes ignore tables simply to make sites more accessible on the small screen real estate available. You will also find that some browsers handle tables differently, and I will mention some of these issues as we come to them. So it’s important to test your tables in a number of browsers and devices before implementing your design.

There are three primary tags in tables.

1. The

tag. This is the container tag for the table itself. It controls the main table blocks position, style, and boundries.

2. The

tag. This is the table rule tag. Basically this controls the horizontal rules found in each table.

3. The

tag. This is the table display tag. It is where we’ll put all of our data in the table. I refer to these as “cells” rather then displays since it sounds more appropriate in my opinion.

Now that we have our three main elements, lets look at some example code:

Here we have our table wrapper with some basic properties set. Since the table we’re working with will displayed in this post I have aligned it to the center of the screen, set its border to 1 so you can see it, and have givin it a width and height of 400 pixels. Inside the main table tags I put two rules, which will display two horizontal lines of cells. Inside each rule I have placed two cells. So we’ll have four cells in all.

It is important to remember that tables are semi-rigid creatures in that the height and width of the largest cell in the rule sets the height and width for all the others. We’ll get into this in a bit so don’t worry if you don’t understand. If I hadn’t have specified a height and width the table either wouldn’t shown up in your browser, or would just show up as a dot. This block of code creates the table you see below.

As you can see, we now have a table with a height and width of 400 pixels containing two rules of two cells. When your browser renders this code it automatically divides the space evenly between the cells unless otherwise specified. By default, all items added to a table cell are aligned to the left and vertically to the center. Even if a tables dimensions are specified they will stretch if more data is put into them then they can contain. Take a look at the table below:

this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test

test

Notice how the table handled the text I placed into the cells. With no defined width the cell on the right expanded to the right until it took up as much space as it could without breaking the 400 pixel width property we placed in the table tag. It should also be noted the the entire table expanded vertically to accommodate the amount of text that I placed inside one of the cells. Finally, notice that the vertical and cells are aligned regardless of their contents. This is the semi-ridged part of the table that I mentioned before.

Now that we have a basic table lets make it a little more useable.

Now lets look at our table:

This is a test this is a test
	This is a test

You’ll notice that we made several very important changes here. First of all we added the background property to the main table tag. This sets the color for the entire table unless it is overridden under either the

tags. I changed the color of the first cell by setting its background as white. This overrides the light blue color I set for the rest of the table.

Secondly you’ll notice that I changed the cellpadding property of the table tag. Cell padding is the space from the cell walls to the text. All text entered into our tables cells now will show up 10 pixels from the cells edges. I should note here that all browsers I have personally tested handle this exactly the same except Microsoft’s Internet Explorer, which adds extra padding by default in some of its versions. Remember this when doing some really precise work.

You’ll also note that I set the “valign” property in the forth cell to “top”. This simply aligns the texts’ vertical position to the top of the cell. You could also set it to bottom if you wanted.

Finally, and most importantly, you’ll notice that I set the width of all four cells. I did this so that you can understand a little better the rigid nature, and the reason a lot of people hate, tables. In the first cell the width was set to 150 pixels, and in the second cell I set the width to 250 pixels. However I set the third and forth cells differently. The reason for this is to show you that when setting the width of your cells. It’s only important to set the width property of the topmost cell. All the other cells, regardless of what you set their width property as, will align to the highest cell that contains a width. The same can be said for height, however the table will still naturally expand to accommodate the data you put into it.

That’s it for this tutorial. Tables can be complex if you don’t understand their idiosyncrasy, however they can be powerful tools in the right situations. The best way to get familure with them is to try different things, and test them with different web browsers. I’ll cover some of the more advanced features of tables, and even how to apply CSS to them at a later date. Until then I hope you found this helpful.

Adobe Illustrator Ladybug Tutorial Part 3 – Usage

Bryan — Fri, 02 Jul 2010 17:25:45 +0000

Introduction

Like I promised this is the third, and final, part to our ladybug tutorial. If you want to read up on how to make your own ladybug you can get to the first two parts of the tutorial above. As with my tutorials before, I want to give some usage examples for the subject of our tutorial. Those wonderful lipid munching ladybugs. Here we go.

My first example uses the ladybug directly as you see it in the tutorial. This is a simple example tri-fold flier from an imaginary flower shop. I made this flier using the my Floral, Vine, Flower, and of course Ladybug tutorials for a combined effect. I like these fliers because their simple, cost effective, and straight to the point. This by the way was not done in Indesign. Illustrator can do just as good a job making fliers like these if you use your head a little when your setting up your drawing.

My next example is the illustrated ladybug. This takes our drawing, removes the gradients, and applies a simple charcoal stroke. Simple, but the effect is something your likely to see in a lot of children’s books. I’ll give you a hint; this is how a lot of children books are illustrated. Bright colors, solid fills, and the warm feeling of hand drawn sketches will probably remain in children’s books for a very long time to come.

Now what if you want to have a more antique china feel. Take your ladybug from the tutorial. First make a copy of your ladybug, then apply a gaussam blur to the original, and set the stoke to transparent. Now paste your copy over the original, and remove it’s fill. Instant china plate lady bug.

Well we now have antique bugs, and old china bugs, what about modern robotic bugs? Change some colors around, apply a stroke and curl to your antennas, and your ready to go. Robo ladybug all ready for your metallic theme.

Well that’s all my examples for this portion of the tutorial, but this barely touches the ideas I had. I hope you enjoyed the tutorial, and thanks for reading.

Adobe Illustrator Ladybug Tutorial Part 2

Bryan — Fri, 02 Jul 2010 17:06:46 +0000

Introduction

This is the second part of our ladybug tutorial. We have already laid out the ladybug’s body in the first part of this tutorial. We will be using that as our foundation for our second part. We still have a lot of work to do so, take your time as you walk through this part. I’ll try to explain it as clearly as I can, hopefully, without losing you. If you missed the first tutorial, you can click the link above to read it.

Part 2 – Finishing Out Our Ladybug

Open up the ladybug body we completed in the first tutorial. It should look something like the picture you see here. To finish our ladybug out we need to give it some eyes, antenna, and legs. It might not sound like much, but this is going to be the larger portion of this tutorial. So lets get to work.

The Eyes …

The first thing I want to add is the eyes, so set your fill color to white and stroke to black. Select the Ellipse Tool from the Tool Pallet, and draw a small ellipse like the one you see here. Now use your Selection Tool from the Tool Pallet to drag the ellipse over the head to make the white part of the eye. Resize it using the grips if you need to make it smaller, or change it’s shape.

Once you have the eye the right size and shape you want, select it and make a copy by using CTRL + C. Now paste the new copy of the eye over the other using CTRL + F. While holding down the Shift key, drag the new eye to the other side of the head. Holding the Shift key will allow you to drag the eye without changing it’s relative vertical position to the other eye. This will keep them perfectly even vertically. For this tutorial we won’t worry about exact mirroring horizontally.

Now it’s time we make the pupils. Set your fill to black, and select the Ellipse Tool again from the Tool Pallet. Draw a small black circle on the screen by holding down the Shift key while drawing will make the circle perfectly round. Drag the new circle over the eyes we just placed. Make a copy of the pupil just like you did with the eye. Paste the new pupil over the old one with CTRL + F, and use the Shift key once again while dragging the pupil to the opposite eye. When your finished your picture should now look more like this one.

On to The Shell

As you can tell from the picture above I got a little ahead of myself while I was taking screen shots. So lets get caught up. Select your Line Tool from the Tool Pallet. We want to draw a single line from the bottom center of the red shell, to the top center. Select the top most quadrant of the shell and drag down until you reach the bottom most quadrant. Once again to can use the Shift key to draw a perfectly straight line spitting the shell into two equal parts. Once you finish well move onto the spots.

The spots are relatively easy. All we need to do is make some copies of our pupil like before and paste them, however we like, on the shell. Pick your Selection Tool, and select one of the pupils we drew before. Once you have selected your pupil, copy it by using CTRL+ C. Since we don’t need to place our spots in any particular place, just use CTRL + P to paste the spots on the screen. Position the spots on one side of the shell in the desired locations. Why on one side you ask. Well we are going to cheat my mirroring our spots by using the Reflect command.

Once you have your spots where you want them, hold down the shift key while using the Selection Tool to select all of the dots. Now right click on the screen and select Transform -> Reflect. You should now see a highlighted mirror image of the spots you first selected. Now hold down the Shift key again, and drag your spots onto the opposite side of the shell using the Selection Tool.

The Antenna …

Now that our ladybug is starting to look more like a bug then a red blob, it’s time to add our antenna. Select the Arc Tool. From the Tool Pallet and drag an arc somewhere on the open space of the screen. Anywhere is fine, since we are going to use it not only for our antenna, but also our legs later. Select the Selection Tool on the Tool Pallet, and select your new arc. Make a copy of your arc using CTRL+ C and paste a new copy on the screen using CTRL+ P. Using the grips rotate and scale your arc until it looks something like an antenna, and drag it over the head. Now use CTRL + C again to make a copy of your new antenna, then CTRL + F to paste a new one over it. Right click on the screen and select Transform -> Reflect to make a mirror image of it. Finally drag the new reflected Antenna to the opposite side of the head.

Once you have finished your antenna, it’s time to add the little balls at the end. This is of course a matter of preference. If you don’t like balls at the end of your antenna, you can skip this step. To add them, select one of your pupils or spots using the Selection Tool, and make a copy using CTRL + C Paste two new black circles on the the screen using CTRL + V. Now drag the two new copies over the ends of the antenna. That’s all nothing more to see here.

Finally, The Legs …

Here is where leaving our original arc on the screens going to pay off. Select the original arc you drew on the screen, and make two more copies of it. You should remember how by now. If it looks like my original above, you won’t even have to make any changes to them. Drag the three arcs to one side of the body spacing them equal distance apart vertically. You may want the front legs to stick out further then the rear ones. Don’t worry if they cover your image. You just don’t want your legs to stick out the other side.

Now for the other side. Using the Selection Tool drag over all three of the newly positioned legs so that all three are selected. Now you want to use the Transform -> Reflect command to mirror those legs like we did the spots. Drag the mirrored legs to the opposite side of the body while holding the Shift key.

Now that our legs are in position, we need to hide the excess under the body. Select all six legs using the Selection Tool, and right click on the screen. Use the command Arrange -> Send to Back to send the legs to the bottom of the drawing order. Thus hiding them under the body so that we only see what is sticking out. It’s just that simple.

Depending on your drawing size you may want to change the stroke of your legs. Use the Stroke window to play around with different leg widths, and caps, till you find what style your looking for if your not happy with the basic legs. I’m just going to go with the default cap here, and increase the “Weight” to 3pt instead of the default 1pt.

A Little Style …

That’s it for the drawing portion of this tutorial. However, you could go one step further to really make your ladybug stand out. Use your Selection Tool and select the ladybugs shell, then go to the Gradient window. Under “Type” select “Radial”. Your shell will now become a radial gradient. I filled my shell with a mid to deep red as shown here. Use the Gradient Tool from the Tool Pallet to adjust the intensity, and amount of gradient you want. I won’t go into using the Gradient Tool here, because simply, I could write a whole tutorial on just using it. Play around with it, and you will understand it’s usage very quickly though. Here is my finished product:

Wow! … Finally finished! A lot of work for such a little critter hugh? Since this installment is quite long, I’ll bring you some usage examples in a third, and final, installment. So, until next time. Thanks for reading.

Adobe Illustrator Ladybug Tutorial Part 1

Bryan — Fri, 02 Jul 2010 16:56:02 +0000

Introduction

This tutorial will teach you how to draw your very own ladybug using Adobe Illustrator 9.0, CS, CS2, or CS3. This tutorial is rather simple in terms of drawing, but contains a good number of concepts and ideas you will find useful in future, more complex, drawings. The entire tutorial should not take more then one to two hours for most people to complete. The entire drawing took me only 10 minutes to create with the screen shots for the tutorial. Of course the entire tutorial took a few hours to write.

Although drawing a ladybug is easy, it requires quite a few steps, so I’m going to split this tutorial up so that our more bandwidth deprived friends can enjoy reading it. This should also make the tutorial a little more legible also. I would like to hear your thoughts on improving this, and my other tutorials, as you read along. Let’s get started.

Part 1 – The Main Body

First we want to open illustrator, and start a blank drawing. Once again, any size is fine. I’m using an 800×800 pixel layout for this drawing if your dead set on following along exactly as we progress. Set your Fill to white and your Stroke to Black. This will make it easier to work with our shapes.

Now let’s start by selecting the Ellipse Tool from the tool pallet, and draw an ellipse on the screen. This ellipse will be the main body of our ladybug. For the head we need to draw a second ellipse slightly smaller and below the first. Notice that my second ellipse is near half the size of the larger one. You should see what I have here. Don’t worry if your ladybug body looks more like a Junebug. We will fix this later.

If your ellipses do not line up correctly you can use the Align to Center tool in the Align Window Pallet. If you don’t see it on your screen, you can access it using the Window pull down menu. Just drag a window over both ellipses and select the second button on the Align Window Pallet. You will see your ellipses align to each other on your screen. Now that your ellipses are all lined up it is time to move on.

You may be asking why I drew the head second instead of first. I had originally, then I thought, it would be really good to mention the Send to Back command since life is not always easy. You never know when you will need to use it, and as long as you draw in illustrator, you will use it a lot. So select your smaller ellipse, right click on the screen, and select Arrange->Send to Back. You should now see the smaller ellipse behind the larger one.

Now we need to do something about that Junebug look we have going on. Select the larger ellipse again. We are going to make a quick and simple change to the shape of our larger ellipse by removing the lowest anchor point. Select the Delete Anchor Point Tool from the Tool Pallet. You should see four anchor points now on the quadrants of the larger ellipse. Select the lowest quadrant to remove the anchor. Don’t change any other features. Just removing this one point is enough to get the effect we want. When your finished you should see Something like the figure below.

Now that we have a good idea as to how our ladybug body is shaping up, it’s time to make some minor adjustments to the height and width to get our proportions correct before going further. Select your Selection Tool from the Tool Pallet. Select both ellipses by drawing a window over them. Using the grips, transform your junebug looking ladybug into a ladybug looking ladybug. Mine is a little long for a ladybug, so I’m going to make her a tad shorter, but otherwise I am happy with the shape. If you distort your ladybug a little too much use the Edit -> Undo command from the File Menu to restore your image.

Finally for this portion of the tutorial we need to apply a little color to our main body. I’m going to make my larger ellipse the traditional ladybug red, and the smaller ellipse, or head, black. Select the shape you want to colorize, then select the color you want by double clicking on the Fill square in the Tool Pallet.

Here’s the finished product for the first part of the tutorial. Next time we will start applying various body features to our little bugs.

Thanks for reading. The second portion of this tutorial will be coming shortly.