plasticBrain

GUI Magnets Help Layout Your Website

mike — Mon, 22 Sep 2008 07:39:18 +0000

The first and most crucial part of designing a website is actually laying out it. There are several ways to do it — mind maps, sketch on a whiteboard, pencil and paper, etc — but those are no fun! While stumbling around the interweb the other night I came across something that was geeky, fun, and most importantly useful… Check out Gui Magnets (or these Gui Magnets) these things rock! Basically, they are little magnets thats contain all sorts of UI elements. There are scroll bars, text boxes, radio buttons, check boxes, drop down lists, and much more! They are coated with a “special” material that let’s you write on them with dry erase markers and then erase them when the fun is over. Did I mention that they stick to metal shit? Order. Now.

Resources

Gui Magnets and More Gui Magnets

Design and Inspiration: Freak Show Art Work

mike — Mon, 22 Sep 2008 04:41:11 +0000

Here is a nice collection of “Freak Show” art work, signs, and advertisements. These are all painted, wooden signs that I saw at a local fair and decided to get a few shots of. I have more, but these are the only ones that I have had the time to crop and resize. There’s some pretty cool stuff here. I love the colors and the style — great inspiration!

Miss Olga Hess…The Headless Girl

Wild Woman

[Really Small] Bearded Woman

Kid With Two Heads

Multi-Headed, Multi-Legged, and Really Small Animals

That’s all for today! Whenever I find the time I will crop, resize, and upload the rest of the images that I have.

Resources

View these pictures on Flickr!

PHP - Validating Email Address and Phone Number

mike — Sat, 20 Sep 2008 09:20:58 +0000

Do you have a form and need to validate an email address or phone number? Here we have an example of how to do just that…validate an email address and validate a phone number — for Both standard phone numbers and 800/866/900/etc numbers!

Getting Started

Our final product will contain three different parts: An HTML form, the php that validates the form, and the css that styles everything. The PHP and the HTML form are setup to go in the same file but you can (and should!) copy the CSS to your existing stylesheet.

The Form

Our form is a typical one. One like you have seen on websites everywhere. It includes fields for name, phone number, email address, and a message.

As you can see in the picture, we are making some of the fields required. Aside from that, we will also be validating the name, phone number, and email address (and making sure the message is not left blank.)

The Code

The code is pretty straightforward — and heavily commented — so take a look. After you are finished looking at it we will go over what it does and exactly how it does it.

style.css

/* "holds" everything... in this case it just determines the overall width*/
 #holder {
      width: 600px;
    }

/* styles the text boxes and text area */
    input.text, textarea {
      width: 300px;
      border: 1px solid #ccc;
      margin: 0 0 10px 0;
      padding: 0 0 0 3px;
      height: 24px;
      font-size: 16px;
    }

/* Set the height for the text area */
    textarea {
      height: 150px;
    }

/* Make the submit button push to the right side of the form */
    input#submit {
      margin: 0 0 0 320px;
    }

/* style the labels that are in front of the text boxes */
    label {
      width: 90px;
      text-align: right;
      display: block;
      float: left;
      font-size: 14px;
      margin: 0 5px 0 0;
      padding: 4px 0 0 0;
    }

/* Make our "required" labels red */
    span.req {
      color: #ff0000;
    }

/* The "status bar" at the top -- blue for messages */
    span.message {
      display: block;
      background-color: #DFF1FF;
      border: 2px solid #8FD7FF ;
      color: #333;
      margin: 0 0 20px 0;
      padding: 7px;
      text-align: left;
      font-size: 14px;
    }

/* The "status bar" at the top -- red for errors */
    span.error { /* red */
      display: block;
      background-color: #FFBFC2;
      border: 2px solid #FF6F75 ;
      color: #444;
      margin: 0 0 20px 0;
      padding: 7px;
      text-align: left;
      font-size: 14px;
      font-weight: bold;
    }

/* set the margin and padding for the ul's in the status bar */
    span ul {
      margin: 0;
      padding: 0 0 0 20px;
    }

/* set the margin and padding for the li's in the status bar */
    span ul li {
      margin: 0;
      padding: 0;
    }

validate_form.php

 0) {
    if(!ereg('^[a-z A-Z]+$', $name)){
      $error['name'] = "Your name contains invalid characters. Only letters are allowed! "; // invalid characters
    }

  } else {
    $error['name'] = "Please enter your name!"; // the name field was left blank
  }  

//validate phone number

if (strlen(trim($phone)) > 0) {
    if(!ereg('^([1]-)?[0-9]{3}-[0-9]{3}-[0-9]{4}$', $phone)){  //
      $error['phone'] = "Your phone number is not valid!";
    }
  } 

//validate email

  if (strlen(trim($email)) > 0) {
    if (!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)){
      $error['email'] = "Your email address is not valid!";
    }

  } else {
    $error['email'] = "Please enter your email address!";
  }

// Check the message

if (!strlen(trim($message)) > 0) {
  $error['message'] = "Please enter your message!";
}

//
// We are finished validating the form. Now, let's see if there were any errors.
// If there are no errors, we proceed. If there are errors, we will print
// them to the screen and highlight the fields in the form
//

if (empty($error)) {

// There were no errors!
  $msg = "Congrats, $name! There were no errors in the form!";

} else {  

// There were errors, let's set the styles for the fields
  $error_msg = "\n";

  foreach($error as $field => $message) {
    $style[$field] = "border: 1px solid #ff0000 !important;;
                      background-color: #FFEFEF !important;";
    $error_msg .= "$message\n";
  }

  $error_msg .= "\n";
}

} // end check for submit button...

//
// Now we print the form...
//

?>

  
     0) {
        echo " $error_msg \n";
      }

      if (isset($msg) && strlen(trim($msg)) > 0) {
        echo " $msg \n";
      }
    ?>

	  
	    Name* 
	    


	    Phone Number
	    


	    Email* 
      


	    Message* 
	    <?php if (isset($_POST['message'])) { echo $_POST['message']; } ?>

Was the Form Submitted?

Let’s take a look at the code. Starting at the top:

if (isset($_POST['submit']))

When the page is loaded, this line of code checks the POST data — if there is any — to see if the “submit” button was pushed. If you were wondering how our PHP code knew the name of our button then take look at the HTML code for the form. You will notice that we gave our button the name “submit”. If the button was pressed, we continue on to the next lines of code:

// gather the POST data
$name = $_POST['name'];
…

// make sure our variables are empty
$error = array();
…

As the comments suggest, these lines get the POST data and makes sure that our variables that we will be using are empty.

Validate the Data

Now we need to take all of the data that was submitted and make sure it meets our guidelines. If it doesn’t we need to let the user know!

Name

 if (strlen(trim($name)) > 0) {

First, we remove any whitespace from the name. Then we make sure that it was not left blank by verifying that it’s length (minus any spaces) is at least 1 character. You can increase this number for a more accurate judgement.

if(!ereg('^[a-z A-Z]+$', $name)){

If the user did enter a name, we then use ereg to make sure that it matches a certain pattern. In this case the pattern is: ^[a-z A-Z]+$
The ^ signals the beginning of the string. The [a-zA-Z] tells us that we can only have upper or lowercase letters from A to Z. The $ signals the end of the string.

$error['name'] = "Your name contains invalid characters. Only letters are allowed! "; // invalid characters
}

If the name does not match the pattern we add an error message to our “error” array as error['name']

} else {
  $error['name'] = "Please enter your name!"; // the name field was left blank
}

Remember, the name was required! If it was left blank, we add a (slightly different) error message to the array.

Phone Number

To check the phone number, we use ereg again, but with a different pattern: ^([1]-)?[0-9]{3}-[0-9]{3}-[0-9]{4}$
This pattern will check both “standard” numbers (555-555-1234) and 1-800 style numbers. Let’s take a look.

if(!ereg('^([1]-)?[0-9]{3}-[0-9]{3}-[0-9]{4}$', $phone)){  //
    $error['phone'] = "Your phone number is not valid!";
  }

Again, the ^ signals the start, and the $ signals the end. ([1]-)? says that there might be one number and a hyphen at the beginning (for 1-800 numbers) but there might not be. [0-9]{3}- verifies that there are numbers [0-9] and that there are three of them {3} followed by a hyphen -. If the number does not match our pattern, we set an error for it in our array.

Email Address

Since email addresses are a bit more complicated than phone numbers, we will use a similar, yet slightly different function. We use eregi instead of ereg. They are the exact same function, except eregi ignores case when matching. This prevents us from having to type [a-zA-Z] each time.

if (strlen(trim($email)) > 0) {
  if (!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)){
   $error['email'] = "Your email address is not valid!";
  }
} else {
 $error['email'] = "Please enter your email address!";
}

The pattern here is a bit more complicated. Think you can figure it out on your own? I Think you can

Message

if (!strlen(trim($message)) > 0) {
  $error['message'] = "Please enter your message!";
}

This one is simple enough. We remove the whitespace and make sure that it has as least one character. If not, we add an error.

Checking for Errors

Now that we have validated all of the submitted data it’s time to either let the user know of any errors, or continue with our script if there were none.

if (empty($error)) {

This checks to see if our array $error contains any data. If it is empty, we know that there were no errors:

// There were no errors!
  $msg = "Congrats, $name! There were no errors in the form!";

Here, we simply display a nice message saying that there were no errors. In real life, this is where you would put the code to do whatever it is that you are actually wanting to do with this form — send an email, add data to a database, submit comments to a blog post, whatever.

} else {  

// There were errors, let's set the styles for the fields

If we get to this point, it means that our $error array is not empty — it’s holding data about the errors on the form.

  $error_msg = "\n";

  foreach($error as $field => $message) {
    $style[$field] = "border: 1px solid #ff0000 !important;;
                          background-color: #FFEFEF !important;";
    $error_msg .= "$message\n";
  }

  $error_msg .= "\n";
}

Here, we use a new variable — $error_message — to create an unordered list that displays each of the messages. Then, we use foreach to loop through our $error array. For each error it takes the key of the array (which is the field name) and the value of the array (which is the error that we set) and adds it to our list. At the same time that this happens, you will notice that we create yet another array — actually, we create several arrays — called $style[$field]. Do you see what we did there? We created an array called style for each of the fields with an error. Why did we do that? Well, that’s how we determine which fields to highlight on the form to let the user know about their errors. We could further extend this and display the error messages under each text box, create individual styles for each text box, and so on. But, we have dragged this one out long enough so that will have to wait for another time!

Printing the Form

I know some of you are thinking “Wait a minute… we need the form to be shown FIRST, so why is it LAST?!!1!!one!” Well, we have a good answer for that. Our code comes first because the action for our form is set to post back to the same page in which it originated from. This means that when you submit the form, essentially the page is just reloaded. That’s why the PHP needs to be at the top. To catch all of the POSTed data. Also, with it setup this way you are able to use a header redirect if the form is submitted without errors (say, for a login script).

Another thing you will notice before we even get to the form is that we have some more code:


     0) {
        echo " $error_msg \n";
      }

      if (isset($msg) && strlen(trim($msg)) > 0) {
        echo " $msg \n";
      }
    ?>

This is the code that we use to check for, and display, our error messages (and in this case our message for success.) Notice that we check for the string that we created — $error_msg — and not the $errors array. If it is set then we drop it between some span tags that we define in the CSS. Also notice our beginning


	    Name*
	    


	    Phone Number
	    


           ...

Here we have your basic HTML form, with a bit of added flavor… First, we have the form action that we mentioned earlier: tells the form to submit back to the same page.

After that, we have a standard label and an input (text) box. Notice that for required fields, we add * to the labels for our red asterisk *.

The main thing to pay attention to here is the style for each of the inputs. Notice that it’s set as style=” (or whatever the input’s name is) We use this in conjunction with the $style array that was created earlier to highlight the incorrect fields. With me so far? Good!

Last is our submit button. The important thing here is the name that we give it. It must match whatever it is that you are checking for at the beginning of the script –if (isset($_POST['submit']))!

So, What Does This Thing Look Like?

Glad you asked! Let’s take a look:

If you just copy and past the code you will get results similar to what you see here. Nothing too fancy. We just display each error message, and change the borders to a bold red and the backgrounds to a light red on those fields with errors.

Get Creative!

With a little tweaking, you can do other, fancier stuff like:

Download the Script

validate_form.txt - View Demo - Download (5KB)

validate_form (fancy version) - View Demo

Photoshop CS4 Demo (video)

mike — Thu, 18 Sep 2008 09:15:43 +0000

Adobe’s Terry White posted an awesome video demo of some of the new stuff available in Photoshop CS4. This is the first full development cycle of the Creative Suite since Adode acquired Macromedia a while back. Needless to say, everyone had extremely high expectations. We all figured that since the two companies joined that there would be tighter integration with Flash. However, Adobe has gone above and beyond with this version. Not only is there tighter Flash integration now the entire Creative Suite works together seamlessly. And that is just the beginning… Wait until you see some of the new features that will be available in Photoshop CS4!

[Video After The Jump]

The video is good, but it is long. Not to mention the first 15 minutes are pretty much fluff. Fast Forward to the 16 minute mark to get to the good stuff!

Some of the things that are highlighted in the video include:

Much better performance.

They demonstrate by working with a 442 megapixel image that is 2gb big and suffer almost no system lag!
Improved 3D capabilities.

The 3D capability in CS4 is amazing! You basically have the ability to work with 3d files directly in Photoshop now. You can mess with the light sources, draw directly on the 3d textures, create anaglyph images (the ones you look at while wearing the goofy red and blue 3d glasses) and much more. Plus you have the ability to transform panoramic images into three dimensional “environments” and then export them into a flash video — think real estate sites. You know those fancy, 3d sort of “walk through” views of a room? Yea… Photoshop can now do that in a matter of minutes!
Resize brush by dragging mouse

It’s not really talked about, but if you forward to 25:00 in the video you will see them resizing the brush by dragging the mouse. The guy merely mentions it. Kind of like a throw away comment. This feature is excellent and definitely deserved more attention!
Content Aware Image Resizing (also know as seam carving, or “totally kick ass”)

You may have seen the hype around the interwebs a while back about a couple of guys that created some kick ass image resizing technology (see the video below.) Everyone that saw it was absolutely amazed…including the guys over at Adobe! About a week after the video hit the web Adobe, not wanting to miss out, hired one of the developers to help them integrate the feature into Photoshop. This is, by far, the coolest feature that we have seen come to the Photoshop franchise in a while. Watch the video below and be amazed:

This version of Creative Suite seems to really drive home three points:

Cutting edge technology
Better integration
Increased productivity

And by the looks of the demo they really nailed it!

You may also register to view an online presentation on September 23, 2008 that showcases even more features that will be in CS4. Register at http://adobe.com/go/somethingbrilliant. If you just can’t get enough Adobe information for one day, checkout this presentation by John Nack. It’s long winded, but there are a couple more Photshop CS4 features hidden away inside plus loads of other Adobe-centric info.

I really think that Creative Suite 4 is going to completely revolutionize the media industry as a whole. Even if it doesn’t… it will make my life easier and that counts for something!

Sources

CreativeTechs.com, CreativeSuitePodcast.com

Flying to LA for Harrison’s Bday!

mike — Sat, 31 May 2008 06:32:51 +0000

June 18, 2008 10:40 am

June 23, 2008 6:45 pm

Lane and I are going to California for Harrison’s birthday — it’s gonna be the shit!

PHP - Link Cloaking Script

mike — Tue, 27 May 2008 09:00:55 +0000

This script will mask the links on your website. This is important if you do any affiliate marketing. The major search engines will compare your links with their database of “known affiliates” and they will penalize you in the form of high minimum bids. Don’t worry though, this simple little script will “mask” (cloak) your links so that all the search engines (and users) see is something like www.yoursite.com/out.php?id=google

If you have problems copying and pasting the code below, you can download a copy here

Instructions

Copy and paste the script below into an empty php file (our example was called out.php)
Edit the section that says “edit your links here!”
The format is as follows:
“link_id” => “http//www.your_link_goes_here.com”

where “link_id” is the id you pass in the URL like: www.yoursite.com/out.php?id=link_id

Notice that there is a comma at the end of each line EXCEPT the last one!


 "http//www.your_link_goes_here.com"
//
// where "link_id" is the id you pass in the URL
// www.yoursite.com/out.php?id=link_id
//
// if you need help visit us at www.plasticbrain.net
// ---------------------------------------------------------

$links = array(

// -- edit your links here! -- Notice that there is a comma after each entry EXCEPT the last one!!!

"1" => "http://www.your_link_here.com",
"2" => "http://www.another_link_here.com"

// -- Stop editing here! --
);

$id = $_GET['id'];

header("Location:".$links[$id]);
exit;

?>

download the script

link-cloak.txt (1KB)

Flying to Boulder Colorado

mike — Sun, 25 May 2008 13:10:07 +0000

July 10, 2008 4:05 pm

July 14, 2008 2:25 pm

Going to meet up with the rest of the team!