element {
/* Standards-Compliant Properties Here
}

* html element {
/* IE6 Properties Here
}

*+html element {
/* IE7 Properties Here
}

Basically, IE6 and IE7 both think that there is an element above the html element, which is nonexistent in other browsers. So the * html selector is used to target IE6 and 7. To single out IE7, a CSS 2.1 selector (*+html) which is unsupported by IE6 can be used.

The CSS-only technique is a lot less of a pain than using a separate ie6.css file for all of your hacks. Anyway, that’s just a helpful hint I just figured out.

<form id="contact" name="contact" method="post" action="contact.php">
<h2>Contact Me</h2>

	Email:
<input type="text" name="contact_email" id="contact_email" />
	<textarea name="contact_text" id="contact_text">

	</textarea>
	<img src="valid_image.php" width="100" height="30" alt="Type this text in the box below."/>
<input type="text" name="validate" />
<input type="submit" id="contact_submit" name="contact_submit" value="Send" />
</form>

As you can see, the image is actually a PHP file, valid_image.php. In this file, we are going to come up with a random validation string, store it in a session variable, and draw an image with the text in the font we chose. For this to work, you need to give the imagettftext() a relative path to the font from where valid_image.php is saved. If it is the same directory, than just “yourfont.ttf” will do.

<?php
session_start();
header("Content-type: image/png");
// make the random 5-character string
$rand = "";
for ($i=0;$i<5;$i++) {
	$rand .= chr(rand(97,122));
}
$_SESSION['validate'] = $rand;
$width = 100;
$height = 30;
$image = @imagecreate($width,$height);
$bgcolor = imagecolorallocate($image,255,255,255); // put your background color here
$textcolor = imagecolorallocate($image,0,0,0); // put your text color here
imagefilledrectangle($image,0,0,$width,$height,$bgcolor);
imagettftext($image,25,0,0,$height,$textcolor,"acidic.ttf",$rand);
imagepng($image);
imagedestroy($image);
?>

So now we have an image with the string, and a session variable holding the string. Now, when the request is sent to contact.php, we will compare the session variable to the value given in the form. If they are the same, then the contacter is a human that could read the image.

Your contact.php should be saved in the same directory as your form (or you could edit the action attribute of the form), and it should look like this:

<?php
session_start();
if (!empty($_POST['validate'])) {
if ($_POST['validate'] == $_SESSION['validate']) {
	unset($_SESSION['validate']);
	if (!empty($_POST['contact_text']) &#038;&#038; !empty($_POST['contact_email'])) {
		$to      = 'webmaster@example.com';
		$subject = 'Contact Request from '.$_POST['contact_email'];
		$message = $_POST['contact_text'];
		$headers = 'From: '.$_POST['contact_email']." rn" .
			'Reply-To: '.$_POST['contact_email']."rn" .
			'X-Mailer: PHP/' . phpversion();
		mail($to, $subject, $message, $headers);
		echo "Thanks for contacting me!";
	} else {
		echo "Please enter both your email and a message.";
	}
} else {
	echo "Your validation code was incorrect."
}
}
?>

Steve Love gave me a good tip to unset the session variable after use so that it could not be reused. Thanks!

This tutorial was mainly about the validation technique, but if you want to make this form asynchronous, you can follow the last few steps of my last tutorial, to implement the jQuery and AJAX.

Thanks for reading!

To follow this tutorial, you’ll need the jQuery Library.

Let’s start out web 1.0, with just a simple form with a submit button. You’ll want a simple HTML form that looks like this:

So now that we have a form, we’ll need a PHP page to process that form. What we’ll do is take the message, put it into an email and email it to you (you’ll need to put your email, or whatever email you want to receive contact requests). Put this code into a ‘contact.php’ file:


if (!empty($_POST['contact_text']) && !empty($_POST['contact_email'])) {
$to = 'webmaster@example.com';
$subject = 'Contact Request from '.$_POST['contact_email'];
$message = $_POST['contact_text'];
$headers = 'From: '.$_POST['contact_email']." \r\n" .
'Reply-To: '.$_POST['contact_email']."\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
echo "Thanks for contacting me!";
} else {
echo "Please enter your email and a message.";
}
?>


Basically, that code checks to make sure that both $_POST['contact_email'] and $_POST['contact_text'] are defined, and then it constructs an email to you (webmaster@example.com). In the message is the text that they entered. Then it prints a friendly message.

The only problem with what we have so far is that the contact form is very vulnerable to automatic spam. Not quite as bad as putting your email out there, but it is still pretty easy for spammers to just send a request to your ‘contact.php’ page and bombard you with emails. There is a way to prevent this from happening. It involves using PHP’s $_SESSION superglobal to make sure that the contact-er is using your contact form, and not just a single request to contact.php. You need to add a little PHP code to your contact form to make this work. Because we are going to use the session superglobal, we need to set up the session at the top of your pages. In both the page holding the form AND contact.php, put this code at the top:

Now, what we’re going to do is make a random string (an md5 hash of a random number between 1 and 10000), and put it into the form as a ‘hidden’ input field. We also store the hash in a session variable, so we can compare the two in contact.php. Here’s what your form should look like now.

(Notice the PHP lines and the new ‘input’ tag).

And now in contact.php, we need to make sure that the two keys are the same. This is what contact.php should look like:


session_start();
if (isset($_POST['contact_key'])) {
if ($_POST['contact_key'] == $_SESSION['contact_key']) {
if (!empty($_POST['contact_text']) && !empty($_POST['contact_email'])) {
$to = 'webmaster@example.com';
$subject = 'Contact Request from '.$_POST['contact_email'];
$message = $_POST['contact_text'];
$headers = 'From: '.$_POST['contact_email']." \r\n" .
'Reply-To: '.$_POST['contact_email']."\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
echo "Thanks for contacting me!";
} else {
echo "Please enter your email and a message.";
}
}
}
?>


Great! Now we have a functioning contact form. The only problem is, when people use the form, they are sent to a boring page with only text in it. So let’s make the form asynchronous with javascript. jQuery javascript, actually. The script will wait for the form submit button to be pushed, and then will use AJAX to send a request to contact.php, thus sending the contact request. When that finishes, it will append the response text to the form to give the contact-er a result (good if all fields were filled in, bad if they forgot their email or a message). All you need to do is put a little bit of code into your page with the form.

contactform = $('form#contact');
contactform.submit(function() {
$.post('/contact.php', $(this).serialize(), function(data) {
$('form#contact').append("
"+data);
});
return false;
});


So there we go. Somebody can, with javascript enabled, just press the send button and send the contact request to your email asynchronously, without your putting your email out to be picked up by spam bots. The best thing about this is that when somebody isn’t running javascript in their browser, they will still be able to use the form effectively.

Obviously you’d want to style up your form and maybe change around the ’submit’ event to make it a little more stylish, but we have here a solid, secure AJAX-PHP contact form which will help make your site more user-friendly and accessible.

UPDATE: If you want to make sure that your form is validated, check out this tutorial.

I just started making a flash game, my first one in a while, and my first by Cyclonic Studios. I decided that I would organize this project as well as I could. My previous games, while not being very good (you can play one here), were also terribly unorganized and I found that after I had finished them, it was very hard for me to go back and change things.

So this time, I am putting loads of effort into designing everything to be well and sensibly made. Here are some things that I am focusing on.

1. A Solid Game Idea

It is of upmost importance to know what your doing well before you start. You should know how the game is going to look, how the player is going to play the game, and how you are going to make everything work. Before you sit down at your computer and start coding away, you should make sure that you know those three things. How things will look, play, and work.

2. A Solid Game Engine

When you start coding your game, you have to decide how organized everything will be. I find that making a game engine is a good way to keep things organized. Here are a few musts for a game engine:

• A Global Class. A Global class is great for object oriented programming and is basically a class that every single object you make has a reference to. With this in place, you can call functions and access global properties even from a remote object that couldn’t normally do these things. For instance, if the enemies in your game split into more enemies when they die, it would be useful if all you had to do was add a few lines to your enemy “die” code to add more enemies. Just a simple global.makeEnemy(blah,blah,blah); would do the trick, and also make it so that every single other instance of every other class could see that a new enemy was made.
• A UI Class. Just a class to handle all user interface stuff. When I’m making games, I use lots of code to make my interfaces faster and easier to manage. The UI class makes code-based interfaces much simpler, because you can easily show menus, pages, etc. with just a function call. Example: ui.displayMenu(blah,blah); or ui.menu.addButton("Play",function() { play(); }); (I use that last one all the time; its surprisingly useful). And even if you don’t build most of your menus with code, a UI class also makes it easier to display menu sprites and movieclips.
• A Display Class. When you make a game with lots and lots of sprites, movieclips and bitmaps, a single class that draws all of them makes your code much cleaner. Its especially great for people like me who don’t want all their objects extending Sprites, which takes up more memory and is, in my opinion, a shortcut. Instead, you just have one class extending a sprite, Display.as.

3. A Solid Sense of Patience

Once you’ve got your idea and your engine, its time to start making your game. I think that coding games is very enjoyable, but inevitably you’ll have some times when patience is crucial: fixing that bug, drawing this button, and doing everything else that just isn’t…well, fun.

Anyway, happy game development!

A tooltip could be done easily, no javascript required:

a.tooltip:hover:after {
  display:block;
  position:absolute;
  top:-1em;
  content:attr(href);
  border:1px solid #000;
  background-color: #ccc;
}

(This actually doesn’t work quite as well in Firefox 3.0, but it does in Safari and Chrome).

Instant Semantic Forms:

input[type="text"] {
	border:2px solid #fcc;
}
label {
	cursor:pointer;
}
label:hover + input[type="text"], input[type="text"]:hover {
	border:2px solid #ccf;
}
input[type="text"]:focus {
	border:2px solid #aaf;
	background-color:#eef;
}

With this XHTML:

	Text:

You should try that out in compliant browsers, its actually pretty neat.

Or say I wanted a semi-transparent background. One line:

.transparent_back { background-color:rgba(0,0,0,0.5); }

Or if I wanted a box with a border background image:

div.with_border {
	border-image: url(images/borderimage.png) 5 5 5 5 round round;
}

Just so you know, the code that is needed to do that for most browsers takes at least five elements or a really big image and three elements. The border image here can be an 11×11 pixel square (two 5 pixels for the corners and 1px to be repeated on the sides) and just one element, making it easier on both the DOM and the bandwidth.

It is absolutely amazing how much easier fancy web design would be if we could actually use these techniques. Until then (I’m guessing 8-10 years), we’ll just have to stick with annoying hacks and javascript to do this for us. Oh, and if your reading this and using Internet Explorer, go to getfirefox.com or google.com/chrome to get the most out of the internet. CSS 3 all the way.

Topsy is where Twitter meets Digg, and I think there is nowhere that this site can go but up. It will be interesting to see what happens to it as Twitter becomes more and more widely used to spread websites.

1. Smashing Magazine

Smashing Magazine is very popular among web designers and graphic designers alike. It makes sense, because the tutorials, freebies, and collections are consistently high-quality. Subscribing to Smashing Magazine is a great way to learn and get a lot from the web design community.

2. Nettuts, Psdtuts & Vectortuts

If your looking for tutorials on web or graphic design, the Envato Network’s Nettuts, Psdtuts and Vectortuts are the best place to start. They have practically endless amounts of tutorials on Photoshop, Illustrator, and Web Development.

3. Webdesigner Depot

Webdesigner Depot is another site filled with articles written by people from the web design community. There are some great articles here about design, web development, graphics, and inspiration. There is, in my opinion, a little more variety in the posts here than on other sites.

4. Blog.SpoonGraphics

Blog.SpoonGraphics is the blog of a very talented graphic web designer. Chris Spooner writes tutorials expaining most of what he knows. There are some really nice, detailed Illustrator tutorials on this blog, along with lots of freebies and collections.

5. Veerle’s Blog

Veerle’s Blog covers a very wide spectrum in terms of content. Everything from science to CSS tricks to architecture, Veerle’s Blog’s got it. Its a fun read, because you never really know what kind of thing will be published next.

6. Tutorial9

Tutorial9 is a site dedicated to Photoshop, Photography, and Web/Blogging tutorials. All of the tutorials are very high quality, and there are tons of them. Tutorial9 also gives you access to lots of free resources, like icons, photos, and vector packs. A great site to subscribe to!

7. FudgeGraphics

FudgeGraphics is the blog of the talented graphic designer, Franz Jeitz. There are lots of freebies on this site, including brushes, textures and wallpapers. Franz also writes tutorials, focusing on photoshop, sharing some of his tricks. All of his articles are interesting and useful; a good read!

8. Spoonfed Design

Spoonfed Design is a great site to look for tips, tricks and tutorials about illustrator, photoshop, freelancing, and web design. This is another great addition to your arsenal of tutorial sites. Featuring a daily inspiration and a community blog, SFD is a great site to always have your eye on.

9. My Ink Blog

My Ink Blog is truly “a resource for all things graphic and web design.” Here there are tutorials, interviews, freebies, and some really interesting and intriguing articles. A very useful resource at My Ink Blog is Andrew Houle’s “MyInkTrail,” which is a great way to find new, helpful RSS feeds.

And of Course, 10. Cyclonic Studios

(I had to include some self-endorsement). I just started blogging a day ago, so there isn’t a ton here yet, but I promise for a post a day, whether it be inspiration, a collection like this, tip and tricks, or a tutorial. Drop by every once in a while, or you could subscribe to my feed and follow me on twitter to stay up to date!

Thanks for reading, I hope this helped you find some new sites about graphic design and web development. Later!

Anyway, my first lesson is how to make a hideous website. There are plenty of very poorly designed sites out there. So here’s a couple tips to help you on your way to a really terrible-looking site.

1. The more hues in your gradients, the better!

Gradients than span across the color table generally detract from any color scheme you might have had. Oh, and its really handy because Photoshop comes packaged with a couple of these gradients.

2. Use gifs for all your images.

Nothing like a 256-color palette to make your website unattractive. Gifs use dithering to make the gradients appear smooth, but it is nothing like the perfect smoothness of a PNG.

3. Use compressed JPEGs.

Compressed JPEGs look even worse than gifs. The compression algorithm gives JPEGs a signature fuzzy-outline look.

4. Make your text hard to read.

Content really only matters a little, right? So why not use fonts crunched together so tightly and so small you can’t read what they say?
This content is actually very important, so its good that there are CSS properties that let us fit the most possible text into a small space; who cares if people need a microscope to read your text! Content really only matters a little, right? So why not use fonts crunched together so tightly and so small you can’t read what they say? This content is actually very important, so its good that there are CSS properties that let us fit the most possible text into a small space; who cares if people need a microscope to read your text! Content really only matters a little, right? So why not use fonts crunched together so tightly and so small you can’t read what they say? This content is actually very important, so its good that there are CSS properties that let us fit the most possible text into a small space; who cares if people need a microscope to read your text!

5. Use very overused fonts.

Millions of people use Comic Sans and Papyrus, why shouldn’t I?

Make sure to use all these techniques in your next web design to make it as amateur as possible. Thanks for reading!

Disclaimer: I have a sarcastic sense of humor. The images used in this entry were meant to look really, really bad.