Code2Design

Beginning Photo Editing

2009-05-26T17:19:39-04:00

Most people are not aware of just how easy it is to enhance even the poorest of photos. In this video I will cover bringing faded photos to life, enhancing colors, repairing dark photos, removing objects we don't want in our pictures, cropping, rotating, and more! At almost 40 minutes long, you will learn the tricks you need to make your photos stand out!

If you, or someone you know can benefit from this clip please make sure to watch it before June 1st. I entered it into the cast4cash contest and you have until that date to watch it then it becomes a "pay-to-watch" costing $3 dollars.

Please vote for this video, if I win I will be able to purchase better equipment for future screencasts (Like a good Mic for one!). Also, be sure to check out the rest of the videos on mindbites.

MicroMVC

2009-02-21T14:29:41-05:00

Today I am happy to announce the release of MicroMVC at github. MicroMVC is released under the GPL v3 so it is free for anyone to download and use.

MicroMVC is the project that I am most proud of out of all my web apps. It powers this sites video system and other sites where I needed something lightweight and blazing fast.

Along with the new home it has been updated, cleaned up, and outfitted with a couple example controllers that show you how to fetch twitter updates, create posts in a SQLite database, call hooks/plugins, and load views. There is even a video to help you get started.

While this system isn’t for everyone - it is perfect for people that don’t want extra junk in their systems and people who don’t want to deal with a mess of procedural php code everywhere. MicroMVC only requires 5 small files and a controller to work it’s magic. Taking a measly 200kb (or less if caching is on) to run - a lot less than CodeIgniter and Zend which take +2MB and +4MB respectively.

I would love feedback from anyone that would like to try this system out. I hope that it can serve others as much as it has been a help to me. Please feel free to post questions in our forums.

PHP Video Tutorials

2008-09-10T11:58:27-04:00

After several months work I am proud to announce the Code2Design video system is finally up! Featuring 25 videos on HTML, PHP, AutoCAD, and more! Each video is either 640x480 or 800x600 and is avalible to download for private viewing. (Not everyone has DSL in their home.)

The Two videos I recomend the most are PHP Security and Resizing and Sending Images For Email.

PHP security is probably the most advanced video of it's type in the world. It is about 45min long and covers basic attacks like Globals, Includes, and Super Global arrays like $_SERVER and $_GET. More advanced subjects like SQL injection, CSFR, and XSS are covered later in the video. Each attack is not only discussed - but actually shown in action so you can easily follow along.

In addition, you can download the files and replicate the attacks on your own host (before one of my users does it for you). Just look for the "Video Files" link under each video.

I hope you enjoy the videos and please leave feedback on what you would like to see next!

MD5, hashes, passwords, salts and more

2008-04-08T16:04:30-04:00

1) You need to salt your passwords.

"Assume a user's secret key is stolen and he is known to use one of 200,000 English words as his password. The system uses a 32-bit salt (like md5). Because of this salt, the attacker's pre-calculated hashes are of no value. He/she must calculate the hash of each word with each of 2^32 (4,294,967,296) possible salts appended until a match is found. The total number of possible inputs can be obtained by multiplying the number of words in the dictionary with the number of possible salts:

2^{32} \times 200 000 = 8.58993459 \times 10^{14}

To complete a brute-force attack, the attacker must now compute about 800 trillion hashes, instead of only 200,000. Even though the password itself is known to be simple, the secret salt makes breaking the password radically more difficult." - http://en.wikipedia.org/wiki/Salt_(cryptography)

2) Now that I got that off my chest I recommend this awesome PHP class http://www.openwall.com/phpass/ as even WORDPRESS has started using it.

3) Plain md5 is just too simple to crack - it is like WEP in WIFI: http://md5.rednoize.com/

4) Rainbow Tables can kill your simple PHP scripts: http://www.antsight.com/zsl/rainbowcrack/
http://en.wikipedia.org/wiki/Rainbow_table

So please, I don't want to see anyone still using plain md5() hashes - at least use a salt!

http://www.lightbluetouchpaper.org/2007/11/16/google-as-a-password-cracker/
http://phpsec.org/articles/2005/password-hashing.html

Arrays by reference

2008-01-17T15:18:24-05:00

I have been using lots of functions to create and check my variables and arrays lately. Along these lines, I thought I would take some time to share how the concept of "passing values by reference" works.

Basically, if you are anything like me you are always passing functions values and then having that function "return" a value. While there is nothing wrong with this approach, there is often an easier way to work with values in functions. Besides making values "global", you can also pass a function a value by reference.

Here is the standard way most people would work with a value in a function and then collect the functions return value.

////////////////////////////////
// Standard Function
////////////////////////////////

//Lets create a variable;
$my_variable = '';

//Create the "add_key" function
function add_key($key) {
    
    //Create an new array();
    $array = array();
    
    //Ad a key called "new_key" to the array
    $array[$key] = 'value';
    
    //return the $array
    return $array;
}

//Run the function "add_key()" and place the output into 
//$my_variable turning it from an empty variable, into an array!
//In other words, $my_variable is now an array with 1 key called "new_key";
$my_variable = add_key('new_key');


?>

$my_variable is now an array ready for you to use in the rest of your script. If you were to run the print_r() function right now you would see that $my_variable looks like the following to PHP.

Array 
(
    [new_key] => value
)

So now that we're all "on-the-same-page" so to speak, I want to show you how you can use PHP to cut out a little junk from your script. First though, we need to cover the "&" (and) character. The "&" character means that you aren't working with the variable/array/etc. - you are only working with a pointer to that variable/array/etc. In other words, if you mess with something that has a "&" in front of it you are following that $variables sign to another variables value in the computers memory and changing it!

References in PHP are a means to access the same variable content by different names... ...Note that in PHP, variable name and variable content are different, so the same content can have different names. - php.net

If you are lost look at this:

$foo = 'Hello';
$bar = 'World'; 
print $foo . " " . $bar;
//Prints "Hello World"

//Change $bar to equal "Hello My World"
$bar = 'Hello My World';
//Change $foo to equal the value of a variable called "$bar"
$foo = &$bar;

print $foo;
//Finds the value of $bar, and Prints "Hello My World"
print $bar;
//Prints "Hello My World"

//Change $bar to equal "This is bar"
$bar = 'This is bar';

print $foo;
//Finds the value of $bar, and Prints "This is bar"
print $bar;
//Prints "This is bar"

?>

As you can see, from now on $foo will always be eqaul to whatever $bar is equal too! This is quite a useful feature if it is used in the right way!

Taking our first block of code lets change it to use this new type of "variable reference" thinking.

////////////////////////////////
// Simple Function Reference
////////////////////////////////

//Lets create a variable;
$my_variable = '';

//Create the "add_key" function and set the
//value of to $array to whatever variable was given
//to the function.
function add_key2(&$array, $key) {
    
    //This now changes $my_variable into an array
    $array = array();
    
    //Ad a key called "new_key" to $array, which points to $my_variable
    //So add a new key to $my_variable!
    $array[$key] = 'value';
    
    //There is nothing to return so we don't need this.
    //return $array;
}

//Run the function "add_key2()" which works with a reference to 
//$my_variable in real time so when add_key is done running, 
//$my_variable is already updated!
add_key2($my_variable, 'new_key');


?>

$my_variable was transformed into an array by add_key2. Because the first part of the function had a "&" in front of the value to pass the function. That & means that whenever add_key2 worked with "$array", it was really working with "$my_variable"! If you were to run the print_r() function right now you would see that $my_variable looks like the following to PHP.

Array 
(
    [new_key] => value
)

So both methods accomplish the same thing just in different ways. Below is a more complex function I built for CodeXplorer that will add values to any array you tell it. You might need to download it and run it if you have trouble following the code.

////////////////////////////////
// Complex Function Reference
////////////////////////////////


///////////////////////////////////////////////////////////
// A function to set multiple array variables if they don't exist.
///////////////////////////////////////////////////////////
function create_array_keys(&$array, $keys, $value='') {
    foreach ($keys as $key) {
        //if the key is not in the array, create it!
        if (!array_key_exists($key, $array)) { 
            $array[$key] = $value; 
        }
    }
    //There is nothing to return (everything is done by reference).
}

//Create my empty array
$my_array = array();

//create an array of keys I want to add to the array
$keys = array('key_1', 'key_2', 'key_3', 'key_4');

//See what $my_array looks like
print '';
print_r($my_array);
print '';

//If the following values are not set, create them in the array "$my_array" and set them to "TRUE".
create_array_keys($my_array, $keys, true);

//See what $my_array looks like now!
print '';
print_r($my_array);
print '';

?>

If you ran the above code you would see the following output.

Array
(
)


Array
(
    [key_1] => 1
    [key_2] => 1
    [key_3] => 1
    [key_4] => 1
)

So I hope this lesson helps you to better understand how to use PHP's powerful references to avoid having to pass variables around different functions. With references you can simply run a function and know that the variable is being updated automatically. If you want more information on this topic you can visit the PHP manual at php.net - Arguments passed by reference and php.net - References Explained.

Convert MySQL Tables to SQLite Tables

2007-12-13T15:36:36-05:00

If you are having trouble converting MySQL tables to SQLite tables then this tutorial is for you. On the other hand, if you have no idea what I just said then let me explain that both MySQL and SQLite are free, open source databases. While MySQL is the most used open source database in the world, SQLite is catching on as a great database for people who don't need a complex system to manage their data. I personally have been looking into it as a possibility for running my personal blog.

SQLite is an embedded SQL database engine. Unlike most other SQL databases, SQLite does not have a separate server process. SQLite reads and writes directly to ordinary disk files. A complete SQL database with multiple tables, indices, triggers, and views, is contained in a single disk file. The database file format is cross-platform - you can freely copy a database between 32-bit and 64-bit systems or between big-endian and little-endian architectures. These features make SQLite a popular choice as an Application File Format. Think of SQLite not as a replacement for Oracle but as a replacement for fopen(). - the SQLite site

Anyway, if you have already started working with SQLite but have encountered problems with SQL syntax - I would like to explain some of the main differences in creating a table. Lets start with a basic MySQL table.

/* Table structure for mySQL table */

CREATE TABLE `tablename` (
    `id` int(11) NOT NULL auto_increment,
    `title` text NOT NULL default '',
    `text` text NOT NULL,
    `time` int(10) NOT NULL default '0000000000',
    UNIQUE KEY `id` (`id`),
) TYPE=MyISAM;

If you try to just port that over into SQLite - you'll get so many errors it's not funny. First lets start with the "INT" column type. In SQLite it is "INTEGER" not "INT". So, that is the first thing that needs to be changed.

Second, in SQLite "auto_increment" is a given if the key is a PRIMARY KEY. So we can delete the "auto_increment" part of the MySQL query. This now leaves us with the following:

-- Table structure for NEW SQLite table
CREATE TABLE `tablename` (
    `id` INTEGER NOT NULL ,
    `title` text NOT NULL default '',
    `text` text NOT NULL,
    `time` INTEGER NOT NULL default '0000000000',
    UNIQUE KEY `id` (`id`),
) TYPE=MyISAM;

Third, we don't need the "UNIQUE KEY `id` (`id`)," line. In SQLite, that data goes on the same line as the item that is set to the "PRIMARY KEY".

-- Table structure for NEW SQLite table
CREATE TABLE `tablename` (
    `id` INTEGER PRIMARY KEY NOT NULL ,
    `title` text NOT NULL default '',
    `text` text NOT NULL,
    `time` INTEGER NOT NULL default '0000000000',
) TYPE=MyISAM;

Forth, remove the bottom " TYPE=MyISAM" as there is no such type in SQLite. In MySQL you can chose from one of several DB types. However, SQLite only has 1 type - so there is no need to specify it.

Now the last thing we need to do is get rid of the " ` " characters in the code as SQLite doesn't like them in queries. So we just replace all the " ` " with double-quotes (NOT single quotes). You can also just leave them off as they are NOT required. Also, delete the ending comma. Our final output is:

-- Table structure for NEW SQLite table
CREATE TABLE "tablename" (
    "id" INTEGER PRIMARY KEY NOT NULL ,
    "title" text NOT NULL default "",
    "text" text NOT NULL,
    "time" INTEGER NOT NULL default "0000000000"
);

The following tables show how you can use double-quotes in any order without fear of trouble:

$query = 'CREATE TABLE temp2 (
                    id INTEGER PRIMARY KEY NOT NULL,
                    title TEXT NOT NULL ,
                    text TEXT NOT NULL ,
                    time INTEGER NOT NULL
                );
CREATE TABLE "temp3" (
                    "id" INTEGER PRIMARY KEY NOT NULL,
                    "title" TEXT NOT NULL ,
                    "text" TEXT NOT NULL ,
                    "time" INTEGER NOT NULL
                );
CREATE TABLE temp4 (
                    "id" INTEGER PRIMARY KEY NOT NULL,
                    "title" TEXT NOT NULL ,
                    "text" TEXT NOT NULL ,
                    "time" INTEGER NOT NULL
                );
CREATE TABLE temp5 (
                    id INTEGER PRIMARY KEY NOT NULL,
                    "title" TEXT NOT NULL ,
                    text TEXT NOT NULL ,
                    "time" INTEGER NOT NULL
                );';
?>

SQL As Understood By SQLite is a great read for anyone who wants to check advanced queries against the SQL standard. The SQLite Wiki also has a great list of command-line & desktop programs that you can use to create SQLite tables for you if you are still unsure about all this. I personally like SQLiteMan as I can create the database and tables right on my Windows desktop and then export a SQL Schema for use in my php scripts.

Members-system (using My-Sql)

2007-08-29T13:32:08-04:00

PHP and MySQL login-system

Here I will teach you how to create a really basic login-system for use in php and mysql. The system can easily be built on to work with flash and other applications.

I'll just start:

First you need a "data.php" file that looks like this:

 
$dbc = mysql_connect("localhost","***username***","***password***"); mysql_select_db("***db_name***"); 
session_start();
?>

You also need a database with a table (registered) with fields that look like the SQL code below. (If you want, you can copy it into phpMyAdmin and it will create the table.)

CREATE TABLE `registered` (
  `id` int(11) NOT NULL auto_increment,
  `username` varchar(64) NOT NULL,
  `password` varchar(32) NOT NULL,
  PRIMARY KEY  (`id`)
) DEFAULT CHARSET=utf8;

Then (in the main file) we need to include the "data.php"-file:

include "data.php";
?>

function loginForm(){
?>


Username: 

Password:

    }
?>

Now what this does, is that if we ever run the function loginForm() it will output all that HTML there (which of course just is a basic form).

Then we need to make a is_logged_in() function. The code for that should be:

    function is_logged_in(){
        //isset will return TRUE or FALSE
        return isset($_SESSION['loggedIn']);
    }
?>

All this function does is to return whether or not the variable $_SESSION['loggedIn'] is set or not. If it is set - return true. If the session is NOT set - return false.

Now we need to make a function that tells us whether or not the user is trying to login.

    function is_logging_in(){
        return isset($_POST['login']);
    }
?>

This will return true if the post-variable login is set (remember, we put the input field inside an array named login... name="login[username]").

Now we need a function to do the login...

    function login($username, $md5password){
        $query = 'SELECT * FROM `registered` WHERE `username` = \''.mysql_real_escape_string($username). '\' AND password = \''. mysql_real_escape_string($md5password). '\'';
        $rs = mysql_query($query);
        if(!mysql_num_rows($rs)){
            echo "Bad login!";
            loginForm(); //here we ask the user to login again...
            die();
        }
        while($row = mysql_fetch_assoc($rs)){
            if($username == $row['username'] && $md5password == $row['password']){
                $_SESSION['loggedIn'] = true;
                die("window.location.reload();");
            }
        }
        echo "Bad login!";
        loginForm();
        die();
    }
?>

Than we need a function to deal with what to do is to create a function to manage what to happen if the user is logged in:

    function loggedIn(){
        die("You are logged in!");
    }
?>

Ok... Now we just need to structure everything out...

    if(is_logged_in()){
        loggedIn();
    } elseif(is_logging_in()){
        login($_POST['login']['username'], md5($_POST['login']['password']));
    } else {
        loginForm();
    }
?>

All the code now looks like this:

    include "data.php";
    function loginForm(){
?>


Username: 

Password:

    }
    function is_logged_in(){
        return isset($_SESSION['loggedIn']);
    }
    function is_logging_in(){
        return isset($_POST['login']);
    }
    function login($username, $md5password){
        $query = 'SELECT * FROM `registered` WHERE `username` = \''.mysql_real_escape_string($username). '\' AND password = \''. mysql_real_escape_string($md5password). '\'';
        $rs = mysql_query($query);
        if(!mysql_num_rows($rs)){
            echo "Bad login!";
            loginForm(); //here we ask the user to login again...
            die();
        }
        while($row = mysql_fetch_assoc($rs)){
            if($username == $row['username'] && $md5password == $row['password']){
                $_SESSION['loggedIn'] = true;
                die("window.location.reload();");
            }
        }
        echo "Bad login!";
        loginForm();
        die();
    }
    function loggedIn(){
        die("You are loged in!");
    }
    //here komes the logic...
    if(is_logged_in()){
        loggedIn();
    } elseif(is_logging_in()){
        login($_POST['login']['username'], md5($_POST['login']['password']));
    } else {
        loginForm();
    }
?>

Javascript tooltips

2007-06-02T13:51:51-04:00

Easy tooltips using javascript and html

Today I'm gone teach you how to create tooltips in HTML. First of all, you need to let the computer know that we are writing javascript - So start by typing:

;

Now that we have the container for the javascript we can now add the actual code for the tooltips. Paste this inside the script tags:

var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
offsetX = 05;
offsetY = 20;
var toolTipSTYLE = "";
function initToolTips() {
	var ttarea = document.createElement('div');
	ttarea.setAttribute('id','toolTipLayer');
	ttarea.style.position = "absolute";
	ttarea.style.width = "250px";
	if(document.appendChild){
		document.body.appendChild(ttarea);
	} else {
		alert("Your browser does not support the script used at this page, pleas switch browser");	
	}
	if(ns4||ns6||ie4) {
		if(ns4) {
			toolTipSTYLE = document.toolTipLayer;
		} else if(ns6) {
			toolTipSTYLE = document.getElementById("toolTipLayer").style;
		} else if(ie4) {
			toolTipSTYLE = document.all.toolTipLayer.style;
		}
		if(ns4) {
			document.captureEvents(Event.MOUSEMOVE);
		} else {
			toolTipSTYLE.visibility = "visible";
			toolTipSTYLE.display = "none";
		}
		document.onmousemove = moveToMouseLoc;
	}
}
function toolTip(msg, fg, bg, border)
{
	if(toolTip.arguments.length < 1) {
		if(ns4) {
			toolTipSTYLE.visibility = "hidden";
		} else {
			toolTipSTYLE.display = "none";
		}
	} else {
		if(!fg) {
			fg = "#777777";
		}
		if(!bg) {
			bg = "#FFFFFF";
		}
		if(!border){
			border = fg;	
		}
		var content = 'content+=border;
		content+= '">   ';
		content += 'content+=bg;
		content+= '">   content += fg;
		content += '" size="-2"> \;';
		content += msg;
		content += ' \;';
		if(ns4) {
			toolTipSTYLE.document.write(content);
			toolTipSTYLE.document.close();
			toolTipSTYLE.visibility = "visible";
		}
		if(ns6) {
			document.getElementById("toolTipLayer").innerHTML = content;
			toolTipSTYLE.display = 'block';
		}
		if(ie4) {
			document.all("toolTipLayer").innerHTML=content;
			toolTipSTYLE.display='block';
		}
	}
}
function moveToMouseLoc(e) {
	if(ns4||ns6) {
		x = e.pageX;
		y = e.pageY;
	} else {
		x = event.x + document.body.scrollLeft;
		y = event.y + document.body.scrollTop;
	}
	toolTipSTYLE.left = x + offsetX;
	toolTipSTYLE.top = y + offsetY;
	return true;
}
function setToolTip(object, msg, fg, bg, border){
	if(setToolTip.arguments.length < 2) {
		return false;
	} else {
		switch (setToolTip.arguments.length) {
			case 2:
				object.onmouseover = function(){
					toolTip(msg);	
				}
				break;
			case 3:
				object.onmouseover = function(){
					toolTip(msg, fg);	
				}
				break;
			case 4:
				object.onmouseover = function(){
					toolTip(msg, fg, bg);	
				}
				break;
			case 5:
				object.onmouseover = function(){
					toolTip(msg, fg, bg, border);	
				}
				break;
			default:
				object.onmouseover = function(){
					toolTip(msg, fg, bg);	
				}
				break;
		}
		object.onmouseout = function(){
			toolTip();	
		}
	}
}
initToolTips();

Don't bother trying to understand everything that happens, even I don't... But what is importent now is that to create a tooltip to a spessific object you can use one out of two methods... The first one is to add this attributes to a already existing html-tag:

onmouseover="tooltip('text','#forgroundcollor','#backgroundcolor','#bordercolor');" onmouseout="tooltip();"

Now of couse this won't work because #forgrondcollor isn't a valid collor, you need to use valid collors for every field that starts with an '#'. Aditionaly you only need to add one parameter, then the code looks like this:

onmouseover="tooltip('text');" onmouseout="tooltip();"

The second method is to add id to every element that you wan't to create a tooltip belonging to and then at the very bottom of the page (just before the closing tag you can add this script:

And that's it, you're done!

SELECT COUNT from database

2007-05-13T20:16:42-04:00

I thought I would just take a minute to share this little code snippet with you as I had some trouble finding posts online that would tell me if I was going about this the right way! The problem is that I needed a fast way to count how many rows were in a database without using a CPU demanding function like mysql_num_rows().

<?php
$query = 'SELECT COUNT(*) FROM `users`';
$result = mysql_query($query) or die('Sorry, we could not count the number of results: ' . mysql_error());
$numberofresults = mysql_result($result, 0);
?>

You can also limit the count to only rows that meet a certain value:

<?php
//Where the user id is greater than 149.
$query = 'SELECT COUNT(*) FROM `your_table` WHERE `id` > 149';
$result = mysql_query($query) or die('Sorry, we could not count the number of results: ' . mysql_error());
$numberofresults = mysql_result($result, 0);
?>

Free AutoDesk Inventor

2007-04-19T18:05:08-04:00

AutoDesk is giving away free copies of its student programs like AutoDesk Inventor. If you are a student you need to take a minute to register for this great offer! (visit Student Autodesk)

As soon as my month-long fight with my computer-box is over (Curse you SATA, Cheap Video Cards, and ECS Mobos), I plan on releasing some Inventor tutorials and because it is a $4000 program (Full Version) this maybe your only chance to grab a copy!

Please note that you must be a student with a college email address(I think they also allow Highschool emails). Also, you will need a decent video card for this program as it is a 3D modeling program. (64MB video card should be fine - but I suggest a 128MB.)

Simple 3 Column

2007-04-17T21:13:57-04:00

After traveling around looking at sites that hurt my eyes I thought I would put together a basic template that is good-looking, XHTML valid with 3-Columns, and yet simple enough that you can easily navigate the page.

So here is a Cross-Browser compatible design that I have tested in IE6 & 7, Firefox 2, and Opera 9. You can see it live here: Simple 3 Column

Now, the point of this design isn't necessarily for you to just have something through up on your site - but for you to have a basic design to work off of and to hack into your own custom creation. That is why I have included TWO style sheets with this theme. The default is "pretty.css" but if you plan on using the layout as a basis for your own design I recommend you open "index.html" and change the style sheet from "pretty.css" to "simple.css". Because the simple style sheet is cleaner and easy to follow for those changing things...

Remember, keep the content area clean, white, and simple - there is a reason the top websites do it this way. ;)

If you want to change the width of the layout check out this post on dimensions.

Understanding CSS Dimensions

2007-04-17T15:24:35-04:00

If you have ever taken a dive into the CSS code of a layout you liked - only to find something like this:

.object {
    margin: 0px auto 20px .8%;
    padding: 0em 25px;
}

Then this tutorial is for you - because today I am going to explain the strange dimension system built into CSS! :)

Now first off, how many of you have ever be at a lost as to the direction you were going? Or have to think for a minute to figure out where West is from North? Even more to the point - how many of you have ever heard the old saying "Never Eat Soggy Waffles"? (No, quite that! - I didn't make it up!) Well, for all us humans without GPS systems - this saying stands for "North East South West" which is the clock-wise order of the directions.

---N---
W-----E
---S---

Well, CSS also uses the clockwise order of directions. Take a look at the following code:

When you see something like:

.object {
    padding: 10px 25px 5px 0px;
}

If it were in English it would say:

.object {
padding (is): 10pixels(top) 25pixels(right) 5pixels(bottom) 0pixels(on left);
}
.object {
padding (is): 10pixels(North) 25pixels(East) 5pixels(South) 0pixels(West);
}

So just remember that the first element is the top (North) dimension and the rest can be found be saying "Never Eat Soggy Waffles". Now, CSS also has built in pattern recognizers. For instance look at the following code that only seems to cover the padding for the top and right of ".object".

.object {
    padding: 10px 25px;
}

So what is the padding for the left and bottom of ".object"? Well, it is 10pixels on the bottom and 25pixels on the left. The computer automatically assumes that if you don't enter all the dimensions it should just keep repeating the pattern to fill in the remaining spaces. So to the computer, the above code would look like this:

.object {
    padding: 10px 25px (10px 25px);
}

Just like you can type the first three values of a HEX number "color: #fff;" (white) and the computer will recognize it as the full 6 digit HEX number "color: #ffffff;" (white) - you can also type "padding: 5px 10px;" and the computer will see it as "padding: 5px 10px 5px 10px;". The computer will even read just one value and fill all remaining values with that number!

.object {
    padding: 10px;
}
Would mean this to the computer:
.object {
    padding: 10px (10px 10px 10px);
}

So, hopefully you can use this tutorial to help you better follow the code of CSS champs. :)

Instant HTML Help

2007-04-14T01:19:41-04:00

If you're just learning how to create your own little space in the vast expanse of the World Wide Web you are starting at a great time.
When I began learning, nearly 10 years ago, I had to crack open the books, fire up Wordpad and figure this stuff out by trial and error. If I needed help, it was a long search through various indexes.
Now, there are so many resources on the web that anyone wanting to learn HTML or any of the vast languages out there, they have gold readily available at the click of a mouse. Plus, with Web 2.0 becoming more and more prevalent, instant examples are here.
Case in point is the HTML Playground: http://htmlplayground.com/
The name says it all. A list of web coding tags are available for you to select and have instant examples and sample code to look at and then edit it and see what happens.
This is a fantastic resource for any beginner and one I highly recommend checking out and, well, playing around with!

You Can CMS Without One Two

2007-04-05T16:07:03-04:00

In my last posting, I demonstrated how to create a header and footer file to be included at the top and bottom of all, or at least many, pages. This makes it easy to modify those parts and have the changes automatically spread across all the pages that share that header and footer file. This is one of the things a CMS simplifies for the user.

But what if part of your header, or footer, file is your navigation system and you want the button or link to change when the page associated is chosen? That means your header, or footer, must change depending on what page it's included on. Actually, that's one of the beautiful things about PHP - since it's commands are processed prior to the display of the page, you can program those changes to happen for you automatically.

The first thing we need to do is determine what page is being displayed at the moment. The following bit of code, placed at the top of your header file so that it's executed first, will get you the page you're on:

$parts = explode('/', $_SERVER['PHP_SELF']);
$this = $parts[count($parts) - 1];
$pname = substr($this, 0, -4);
?>

What this does is isolate the filename part of the path from the subdirectory(ies) it resides in. The first command creates an array called parts from whatever is between the slashes ('/') of the path. The next determines the filename & extension based upon the index value of the last array element. Finally, we pull off the extension in the third command. The second and third commands could be combined, but there's a reason I keep them separate that I'll explain in a bit.

Okay, we have the name of the page at our disposal, what do we do with it? In our navigation, we can now make decisions about what to do when a certain page is loaded. Here's an example of one navigation element:


if ($pname == 'guestbook') echo " class=\"there\""; ?>>if ($pname != 'guestbook') { ?>} ?>Guestbookif ($pname != 'guestbook') echo ""; ?>

Here's what's happening in this list item. Before we close the LI tag, we check to see if the page name ($pname) matches the page this item links to. If it does, we add the class named there which will invoke different styling for that item to indicate on the item itself we're on that page. What follows is a determination whether or not we need to make this item a link based upon whether the page is loaded or not.

Looks like a lot of typing, but if you have a means of saving blocks of code that you use frequently, you can save off one of these lines and copy it to your header or footer the number of times to match the number of navigation elements you have. Now you'll have an automatically changing navigation system that'll reflect what page you're on without having to remember to code it on the page itself. And since it's located in one easy-to-edit place, you can modify it as needed when changes happen to your site and it will be reflected in all the pages.

Another feature I usually add to the footer of pages is the last modified date. With information we grabbed in the header and the following code, it will automatically be changed as we update a page.

page last modified echo date("m/j/y h:i", filemtime($this)); ?>

This prints the modified date of the filename ($this), giving the date and time that is stored for that page. Nothing earth-shattering, but a handy thing that some visitors look at to determine how old the information is on a particular page.

Next time, we'll explore some more ways to employ PHP to make your static CMS a little less static seeming. Till then, happy coding! :^{>

Photoshop Motion Zoom

2007-04-01T00:20:28-04:00

I've been absent from this site for a while, so I thought I'd jump back in with a simple yet effective Photoshop tutorial.

This tutorial assumes you know how to create a basic selection and understand layers - but that's really it. I will be using Photoshop CS2 on Windows XP.

I call this effect, for lack of a better term, a "motion zoom". This effect adds a blur that creates a zoom focused on a selected item in a picture.

I have attached the photo I will be using called "skateboard.jpg". I find that the best pictures for this effect are ones with a busy background. Solid colors or plain backgrounds limit the effect.

So, open up "skateboard.jpg" into Photoshop.

-- Double click on the layer called "Background" to make it available to edit. I renamed it to "Zoom Background". You may do so if you wish.

-- Next, select your "lasso" tool (L) and select around the skateboarder like so:

-- Now we will prepare the image for the effect.

-- We need to stick Mr. Selection onto its own layer. So go to your menu bar and select: LAYER -> NEW -> LAYER VIA COPY (or use the keyboard shortcut: CTRL + J)

You will now have two layers. Your selection by itself and the original image:

-- Now we apply the cool effect. Click on the bottom layer ("Zoom Background") to select it, go up to your menu bar and select: FILTER -> BLUR -> RADIAL BLUR.

-- Make your blur settings identical to the image below:

Amount: 70
Blur Method: Zoom
Quality: Good

* Note: You can click in the "Blur Center" window and move the center of the zoom around. This can be used if you decide to use a picture where your selected part is in a corner or something like that.

-- Click "OK" and you now see the skateboarder framed in a very cool looking zoom.

-- We are going to fine tune it a bit. Select your blur tool - the icon that looks like a water drop - or hit the "R" key. (If you don't see it, click and hold your mouse over the highlighted tool - after hitting R - and you will see it pop up as a sub-menu choice.

-- Select the top layer (Layer 1) and make sure your blur brush is a small size. To adjust this on the fly hit your bracket keys: "[" or "]".

-- Blur the outside edge of the skateboarder and he will blend into the zoom layer very smoothly.

-- Your finished product should look something like this (I cropped mine a bit for effect):

* If you want, select the bottom layer and play around with it to increase the effect. You can de-saturate it so the skateboarder pops out in color, or mess with the colors to give it a psychedelic look.

And that's it. A simple yet effective effect!