OrangeWeb. » Tutorials

CSS Image Techniques

Michael Raffaele — Tue, 06 Oct 2009 04:10:27 +0000

Websites always need good looking images and there are many ways a designer can make them look good. A problem I commonly run into is that when I have built a website with a CMS, when I hand the site over to the client they want to update the imagery, but can’t get it to look as nice.

Generally I do try to keep image decorations to a minimum, but sometimes that little bit extra can help bring an image to life. Features such as a simple border or subtle drop shadow can really enhance an image.

Similiarly with images that are hyperlinks, we can’t expect to use javascript to change the image on a rollover, or create a sprite for every single image. CSS can provide an alternative to this issue with simplistic image rollovers.

I have created examples of 6 different techniques achieved with CSS that can help to enhance your image.

1.   Outside Border
2. Drop Shadow
3.   Outer Glow
4. Outer Glow With Border
5. Rollover (Opacity)
6.   Rollover (Outer Glow With Border)

Click here to view the source and see these examples is action.

Detect The End of FLV (AS2)

Michael Raffaele — Wed, 29 Jul 2009 10:29:40 +0000

Since version 8, Flash has continued to include a wicked import video feature which allows anybody to compress AVI’s to FLV’s and control the output using a standard web video player format. Also provided are a few different skins for the author to choose from. This component is very quick and useful and above all, almost anyone can use it, not just a web designer.

I was recently asked about “doing something” after a FLV has finished playing is Flash 8 (Actionscript 2), and I realised, hmmm….

I have never actually needed to do that before.

So I decided to look into it, turns out it is actually really simple. Just run through the whole importing a video process (making sure it is a “progressive stream from the webserver”) and give your video component an instance name; in this case we’ll call it videoPlayer.

Next, create your new actions layer and add the following code to it:

Code:
stop();
var listener:Object = new Object();
listener.complete = function(evt:Object):Void {
//DO ACTIONS HERE
}
videoPlayer.addEventListener(”complete”, listener);

That’s it! It’s that simple and you can make it do whatever you like.

Some more useful things to know are the following:

Code:
//This code displays the state of the video. E.g stopped
trace(evt.state);

//This code displays entire video’s length.
trace(evt.playheadTime);

Click here to view a fully working example or here to download it instead.

More Useful HTACCESS Scripts

Michael Raffaele — Thu, 18 Jun 2009 12:37:45 +0000

In the previous article I was rambling about 301 redirects using a .htaccess file. In this article I will show a couple of other very useful htacess scripts that have been helpful in my time as a website designer.

First.

The following script will 301 redirect from a non WWW to a WWW. Meaning if you enter the url: http://domain.com.au it will automatically be redirected to http://www.domain.com.au. It is a personal preference, I think the having the WWW in the URL looks nicer, but not everyone will agree.

I have also read that it can help with SEO by removing any possibility of Google thinking there may be duplicate content. When linking to your website it is always best to pick one form (with www or without www) and stick with it, this script can help if the link is out of your control.

Code:
Options +FollowSymlinks
RewriteEngine on

Rewritecond %{http_host} ^yourdomain.com.au [nc]
Rewriterule ^(.*)$ http://www.yourdomain.com.au/$1 [r=301,nc]

If for some reason this is causing issues with your server try the following code. (It seems to work better with Joomla! 1.5)

Code:
Options +FollowSymlinks
RewriteEngine on

RewriteCond %{HTTP_HOST} ^yourdomain\.com\.au$ [NC]
RewriteRule ^(.*)$ http://www.yourdomain.com.au/$1 [R=301,L]

Second.

The following script is to remove the ugly “index.php” on your homepage you can sometimes get when linking back to it.

For example: http://www.domain.com.au/index.php would simply become http://www.domain.com.au. I think that the URL without the index.php look much more attractive – again just my opinion.

Code:
Options +FollowSymlinks
RewriteEngine on
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.php\ HTTP/
RewriteRule ^index\.php$ http://www.yourdomain.com/ [R=301,L]

Htaccess 301 Redirects

Michael Raffaele — Mon, 15 Jun 2009 12:41:52 +0000

Working for a high end Search Engine Optmisation (SEO) and Melbourne Web Design company has taught me many useful things that I need to take into consideration when developing an entirely new web site or modifying an existing one.

In the past when I had deleted a page on a website for one reason or another, I deleted it and that was it. I had no thoughts about what search engines have indexed it, what external sites may have been linking to it or even the overall power and relevancy of the page itself.

These days as soon as one page has been deleted or moved, I ALWAYS perform a 301 redirect to the new URL, a related URL or back to the homepage. This ensures any value the page had is not entirely wasted and may be transferred over.

To perform the redirects I use a .htaccess file with the following very simple code:

Code:
Redirect 301 /oldurl http://www.newurl.com.au

301 redirects using htacess can be very powerful. If I have moved an entire 200 page web site over to a new domain using the exact same structure and I plan to transfer all existing search engine rankings across, my best bet is to perform 301 redirects for each page.

Obviously, we don’t want to create 200 redirects manually so this can be easily avoided using the following.

Code:
RewriteEngine on
redirectMatch 301 ^/(.*)$ http://www.newurl.com.au/$1

This code would sit in the htaccess file of the OLD domain name. If I had this htaccess on my current URL (web-design-melbourne.net), any URL would be redirected to newurl.com.au. For example:

http://www.web-design-melbourne.net/testurl.html
–> would become –>
http://www.newurl.com.au/testurl.html

This is a powerful 301 redirect script using htaccess and I have used it without error countless times.

Quick Automatic PHP Mailer

Michael Raffaele — Thu, 04 Jun 2009 15:46:25 +0000

I am not a web developer, nor do I pretend to be, but as a web designer I do like to dabble. I have built up quite a range of useful scripts that I have written and I continually use over and again.

A very useful and simple script, commonly used by myself, is an automatic PHP mailer using a FOREACH loop to get all the POST data. This method is quick and easy to implement.

Why should I use a FOREACH loop in a PHP mailer?

The answer is simple, this script enables you to get all the field names and values from a form automatically. Lets have a look what I mean..

A very simple form using only 3 text fields

If I was to email the form results using PHP, on my confirm page I would have code very similar to the following…

Code:
$to = “test@thisisatestemail.com.au”;
$from = “no-reply@thisisatestemail.com.au”;
$subject = “This is my subject”;

$message = “Name: ” . $_POST['fname'] . “\n”;
$message .= “Last Name: ” . $_POST['lname'] . “\n”;
$message .= “Email: ” . $_POST['email'];

$headers = “From: $from”;

mail($to, $subject, $message, $headers)
?>

Now, don’t get me wrong, this works great, and you do have ultimate control over what fields are displayed and how. But imagine a form with say 30+ fields? You don’t want to have to append the field name to the message 30+ times. For 3 immediate reasons:

1. It can be a complete waste of time
2. As there is more code, the chances for a syntax error greatly increase
3. It is repetitive and boring to write

The easiest way around it is to create a FOREACH loop for all the values in POST. An example of said code is as follows:

Code:
$to = “test@thisisatestemail.com.au”;
$from = “no-reply@thisisatestemail.com.au”;
$subject = “This is my subject”;
$message       = “”;
$headers       = “From: $from\r\n”;
//This is the loop that grabs POST values and adds them to the variable
foreach($_POST AS $field => $value) {
$message    .= $field . “: ” . $value .”\r\n”;
}
mail($to, $subject, $message, $headers);

Basically this code grabs all the fields and values in POST and appends them to the variable $message, which is then mailed. You can take it a little bit further and exclude certain fields that you do not want to see in your email, such as the submit button.

You can download a working form using this PHP mailer here.